CSSセレクタ

セレクタ

基本系

要素セレクタで選択

css

p { 
  /* CSS記述 */
}

クラス名で選択

css

.classname {
  /* CSS記述 */
}	

IDで選択

css

# idname{
  /* CSS記述 */
}	

全称セレクタ

全ての要素を選択

css

*{
  /* CSS記述 */
}

複数の要素を選択

css

p, div, .classname, #idname{
  /* CSS記述 */
}	

結合子

子孫要素を選択

階層の深い子要素(孫)もセレクタの対象になります。
例：divの中のp全てにCSSを適用する

css

div p {
  /* CSS記述 */
}

直下の子要素を選択

１つ下の階層の子要素だけが対象です。(孫要素は対象外)
例：divの直下にあるpだけにCSSを適用する

css

div > p {
  /* CSS記述 */
}

弟要素を選択

同じ階層にある、指定した要素より後にでてくる要素が対象です。
例：同じ階層にあるh3より後に出てくるa全てにCSSを適用する

css

h3 ~ a {
  /* CSS記述 */
}

直後の要素を選択

同じ階層にある、指定した要素の後ろ隣にある要素が対象です。
例：同じ階層にあるh3の直後のaだけにCSSを適用する(間に他の要素があると適用されない)

css

h3 + a {
  /* CSS記述 */
}

属性セレクタ

href、class、id、srcなどの属性の値から選択できます。

属性値が一致する要素を選択

属性値が一致していれるものを選択します。
例：クラス「classname」を持つp要素だけにCSSを適用する

css

p[class="classname"] {
  /* CSS記述 */
}

属性値の“一部”が一致する要素を選択

属性値の一部が一致していれるものを選択します。
例：「x」という文字が含まれてる属性値を持つp要素だけにCSSを適用する

css

p[class*="x"] {
  /* CSS記述 */
}

属性値の“最初”が一致する要素を選択

属性値の始まりが一致しているもの選択します。
例：「a」という文字から始まってる属性値を持つp要素だけにCSSを適用する

css

p[class^="a"] {
  /* CSS記述 */
}

属性値の“最後”が一致する要素を選択

属性の終わりが一致しているもの選択します。
例：「z」という文字で終わっている属性値を持つp要素だけにCSSを適用する

css

p[class$="z"] {
  /* CSS記述 */
}

疑似要素

疑似要素の記事書きました。

css

p::first-letter{
  /* CSS記述 */
}

疑似クラス

疑似クラスの記事書きました。

css

p:hover{
  /* CSS記述 */
}

CSSの詳細度

複数のセレクタで同じプロパティが指定されている場合は、詳細度によってどちらが適用されるか判定されます。
詳細度の位はバージョンナンバーのように、10になっても繰り上がりません。
比較方法：数字を左から順番に比較していく(同点の場合は後から記述されたものが適用される)

詳細度	セレクタ
0,0,0,0	全称セレクタ、:not疑似クラス、結合子
0,0,0,1	要素セレクタ、疑似要素
0,0,1,0	クラス，:not以外の擬似クラス，属性セレクタ
0,1,0,0	ID
1,0,0,0	スタイル属性(インラインスタイル)

疑似要素は詳細度0,0,0,1ですが、別の要素になるのでCSSの効き方が元の要素から独立します。

:not擬似クラス自体は詳細度に加算されないですが、除外対象の詳細度が加算されます。
結合子自体は詳細度に加算されないですが、結合対象の詳細度が加算されます。

!importantが指定されると詳細度に関係なく最優先になります。
!important指定がある同士の比較の場合はどれが優先されるかは詳細度で判断されます。

後で面倒な事になるので、!importantと、CSSでのIDの使用は避けましょう。

詳細度計算ツール

Specificity Calculator