CHROMA

世の中の "当たり前" を確認する

セレクタの種類と優先順位

Dev

種類

CSSセレクタ。

  • IDセレクタ
    ex) #id_name
  • クラスセレクタ
    ex) .class_name
  • 属性セレクタ
    ex) 要素名[属性名], 要素名[属性名="属性値"], 要素名[属性名~="属性値"], etc..
  • タイプセレクタ
    ex) h1, p, ul, div, span, etc..
  • ユニバーサルセレクタ
    ex) *（アスタリスク）

優先順位

1から6の順に効いていく。

  1. !import宣言セレクタ
  2. IDセレクタ
  3. クラスセレクタ
  4. 属性セレクタ
  5. タイプセレクタ
  6. ユニバーサルセレクタ

優先順位の付け方

“セレクタの記述方法による優先度”からW3CのCSS2.1仕様書の訳を引用。

  • 特異性は a, b, c, d という並びで形成される数値で表される。基本の 値は全て0(よって 0, 0, 0, 0)
  • style属性に値が設定されている時は「a」を1に設定
  • ID属性が含まれている場合は「b」を1加算
  • ID属性以外の属性が含まれている場合は「c」を属性の数だけ加算。 また擬似クラスが含まれている場合も「c」を擬似クラスの数だけ加算。
  • 要素が含まれている場合は「d」を要素の数だけ加算。また擬似要素が 含まれている要素の数だけ

参考：
!important だらけの CSS にお別れを
セレクタの記述方法による優先度

ツール

Specificity Calculator

使い方はコリスさんで紹介されてる
CSSのセレクタによる優先順位を分かりやすくビジュアル化するオンラインツール -Specificity Calculator

その他のセレクタ

よく利用するケースをセレクタとして子孫セレクタ、子セレクタ、隣接セレクタが用意されている。

擬似クラス

特定の状態のときにスタイルを使用出来る擬似クラスが用意されている。

  • リンク擬似クラス
    ex) :link（初期状態）, :visited（訪問済みの状態）
  • ダイナミック擬似クラス
    ex) :hover（カーソルが重なっている状態）, :acrive（クリックしている状態）, :focus（フォーカスされた状態）
  • :before, :after 擬似クラス
    ex) :before, :after
  • :first-child 擬似クラス
    ex) :first-child
  • :first-line 擬似クラス
    ex) :first-line
  • :first-letter 擬似クラス
    ex) :first-letter
  • 言語擬似クラス
    ex) :lang()

ベンダープレフィックス