CSS(スタイルシート)セレクター詳細度カウンター

スタイルシート　セレクター詳細度カウンター

スタイルシートにおいて、セレクタの記述内容と詳細度チェッカーになります。 以下にセレクターを記述してみましょう。

0
ID
0
クラス0、属性0、疑似クラス0
0
タグ0、疑似要素0

セレクター 一覧

種別名 詳細度 種類 サンプル
ID(アイディー) 3 # #sample
class(クラス) 2 . .sample
attribute(属性) 2 [xxx=yyy] div[name=sample]
pseudo-classe
(疑似クラス)		 2 :active, :any-link, :blank, :checked, :current, :default, :defined, :dir(), :disabled, :drop, :empty, :enabled, :first, :first-child, :first-of-type, :fullscreen, :future, :focus, :focus-visible, :focus-within, :has, :host, :host, :host-context, :hover, :indeterminate, :in-range, :invalid, :lang, :last-child, :last-of-type, :left, :link, :local-link, :matches, :not, :nth-child, :nth-col, :nth-last-child, :nth-last-col, :nth-last-of-type, :nth-of-type, :only-child, :only-of-type, :optional, :out-of-range, :past, :placeholder-shown, :read-only, :read-write, :required, :right, :root, :scope, :target, :target-within, :user-invalid, :valid, :visited a:hover
element
(要素)		 1 タグ名を直接記述 div
pseudo-element
(疑似要素)		 1 ::after, ::backdrop, ::before, ::cue, ::first-letter, ::first-line, ::grammar-error, ::marker, ::placeholder, ::selection, ::slotted, ::spelling-error
※注 CSS3よりコロン２つになりました。古いブラウザでは未対応の場合があります。		 a::after