セレクタの種類
セレクタ(selector)で、スタイルを適用する対象を指定します。以下は、CSS3で定義されているセレクタです。
ユニバーサルセレクタ / タイプセレクタ(Universal selector / Type selector)
属性セレクタ(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