@ CSS

セレクタ

セレクタ(selector)は、スタイルを適用する対象を指定するものです。ブラウザの種類やバージョンによって対応状況が異なりますので、注意が必要です。

セレクタのパターン

セレクタには「パターン」と呼ばれる条件が多数定義されています。セレクタの条件に適合し、選択された HTML ドキュメント内の要素には、CSS の宣言ブロックで定義されたスタイルが適用されます。

パターンの書式 説明 パターン名
* すべての要素 ユニバーサルセレクタ(全称セレクタ)
E E 要素 タイプセレクタ
E[foo] “foo”属性を持つ E 要素 属性セレクタ
E[foo=”bar”] "foo"属性が”bar”の値である E 要素。
E[foo~=”bar”] "foo"属性が空白区切りの値であり、その中の値の1つが"bar"である E 要素。
E[foo^=”bar”] “foo” 属性の値が”bar”から始まる E 要素。
E[foo$=”bar”] “foo” 属性の値が”bar”で終了する E 要素。
E[foo*=”bar”] “foo” 属性の値に”bar”を含む E 要素。
E[foo|=”en”] an E element whose “foo” attribute has a
hyphen-separated list of values beginning (from the left) with “en”
E:root 文書のルート要素 構造擬似クラス
E:nth-child(n) E 要素のすべての兄弟要素のうち n 番目の子である E 要素
E:nth-last-child(n) E 要素のすべての兄弟要素のうち後ろから数えて n 番目の子である E 要素
E:nth-of-type(n) E 要素のうち、 n 番目にある E 要素
E:nth-last-of-type(n) E 要素のうち最後から数えて n 番目の子である E 要素
E:first-child E 要素のすべての兄弟要素のうち、最初の E 要素
E:last-child E 要素のすべての兄弟要素のうち、最後の E 要素
E:first-of-type 最初の E 要素
E:last-of-type 最後の E 要素
E:only-child 唯一の子(兄弟になる要素が存在しない)である E 要素
E:only-of-type 同じ型をもつ要素が他にない、兄弟になる要素が存在しない E 要素
E:empty テキストノードを含め子を持たない E 要素
E:link E 要素がリンクで、かつリンク先が未訪問の場合 リンク擬似クラス
E:visited E 要素がリンクで、かつリンク先が訪問済の場合
E:active E 要素のコンテンツ(テキストなど)の上でマウスボタンが押されている状態 ユーザーアクション擬似クラス
E:hover E 要素にマウスポインターがロールオバーしている状態
E:focus テキストフィールドなどの要素 E が選択されている状態
E:target URI が参照した(ハッシュ指定されている)ターゲットになる E 要素 ターゲット擬似クラス
E:lang(c) 言語情報 c を持つ E 要素 言語情報擬似クラス
E:enabled
E:disabled
UI 要素である E のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの UI 要素状態擬似クラス
E:checked UI 要素である E のうち、チェックされた (:checked) もの (チェックボックスやラジオボタンなど) UI 要素状態擬似クラス
E::first-line E要素の最初の書式設定された行 擬似要素
E::first-letter E要素の最初にフォーマットされた文字
E::before E要素の前に生成されたコンテンツ
E::after E要素の後に生成されたコンテンツ
E.myclass classが”myclass”の E 要素 クラスセレクタ
E#myid IDが “myid”のE要素。 ID セレクタ
E:not(s) 単体セレクタ s にマッチしない E 要素 子孫結合子
E F E 要素の子孫であるすべての F 要素 子孫結合子
E > F E 要素の子であるすべての F 要素 子結合子
E + F E 要素の直後に現れる F 要素 隣接兄弟結合子
E ~ F E 要素のあとに現れる F 要素 一般兄弟結合子

W3C 勧告

2. Selectors – Selectors Level 3 – W3C