セレクタの種類

セレクタ(selector)で、スタイルを適用する対象を指定します。以下は、CSS3で定義されているセレクタです。

三角矢印ユニバーサルセレクタ / タイプセレクタ(Universal selector / Type selector)

*
全ての要素に対してスタイルを適用css2
E
E要素に対してスタイルを適用css1

三角矢印属性セレクタ(Attribute selectors)

E[foo]
foo属性を持つ E要素に対してスタイルを適用css2
E[foo="bar"]
foo属性の値が bar と等しい E要素に対してスタイルを適用css2
E[foo˜="bar"]
foo属性の値が空白で区切った値の中の一つ bar と等しい E要素に対してスタイルを適用css2
E[fooˆ="bar"]
foo属性の値が文字列 bar で始まる E要素に対してスタイルを適用css3
E[foo$="bar"]
foo属性の値が文字列 bar で終わる E要素に対してスタイルを適用css3
E[foo*="bar"]
foo属性の値が部分文字列 bar が含まれている E要素に対してスタイルを適用css3
E[foo|="en"]
foo属性がハイフンで区切られた値の中に en で(左から)始まる値を持つ E要素に対してスタイルを適用css2

三角矢印擬似クラス(pseudo-classes)

E:root
文書のルート(階層の一番上/HTML文書はhtml要素)である E要素に対してスタイルを適用css3
E:nth-child(n)
n番目の子である E要素に対してスタイルを適用css3
E:nth-last-child(n)
最後から数えて n番目の子である E要素に対してスタイルを適用css3
E:nth-of-type(n)
兄弟関係にある E要素の最初から数えて n番目の E要素に対してスタイルを適用css3
E:nth-last-of-type(n)
兄弟関係にある E要素の最後から数えて n番目の E要素に対してスタイルを適用css3
E:first-child
最初の子である E要素に対してスタイルを適用css2
E:last-child
最後の子である E要素に対してスタイルを適用css3
E:first-of-type
兄弟関係にある E要素の最初の E要素に対してスタイルを適用css3
E:last-of-type
兄弟関係にある E要素の最後 E要素に対してスタイルを適用css3
E:only-child
唯一の子である E要素に対してスタイルを適用css3
E:only-of-type
同じ種類の要素が無い唯一の E要素に対してスタイルを適用css3
E:empty
テキストノードを含め、子を持たない E要素に対してスタイルを適用css3
E:link
ハイパーリンクのアンカーである E要素のうち未訪問であるものにスタイルを適用css1
E:visited
ハイパーリンクのアンカーである E要素のうち訪問済みであるものにスタイルを適用css1
E:active
アクティブになっている状態の E要素に対してスタイルを適用css1 and css2
E:hover
マウスが乗ってる状態の E要素に対してスタイルを適用css1
E:focus
フォーカスされた状態の E要素に対してスタイルを適用css1 and css2
E:target
参照URLの対象である E要素(リンク先のE要素)に対してスタイルを適用css3
E:lang(fr)
言語 fr で記述された E要素に対してスタイルを適用css2
E:enabled
有効な状態にある E要素に対してスタイルを適用css3
E:disabled
無効な状態にある E要素に対してスタイルを適用css3
E:checked
チェックが入ってる状態の E要素に対してスタイルを適用css3
E:not(s)
セレクタ s に一致しない E要素に対してスタイルを適用css3

三角矢印擬似要素(pseudo-element)

E::first-line
E要素の最初の1行目に対してスタイルを適用css1
E::first-letter
E要素の最初の1文字目に対してスタイルを適用css1
E::before
E要素の前に育成された内容に対してスタイルを適用css2
E::after
E要素の後に育成された内容に対してスタイルを適用css2

三角矢印クラスセレクタ・IDセレクタ(Class selectors / ID selectors)

E.pastel
pastel というクラスを持つ E要素に対してスタイルを適用css1
E#vivid
vivid という ID を持つ E要素に対してスタイルを適用css1

三角矢印組み合わせ(combinator)

E F
E要素の子孫である F要素に対してスタイルを適用css1
E > F
E要素の子である F要素に対してスタイルを適用css2
E + F
E要素の直後の F要素に対してスタイルを適用(隣接兄弟の組み合わせ)css2
E ˜ F
E要素の後の F要素に対してスタイルを適用(一般的な兄弟の組み合わせ)css3
上に戻る