CSS セレクター

CSS セレクターは、一連の CSS の規則が適用される要素を定義します。

メモ: 親のアイテム、親の兄弟、親の兄弟の子を選択するセレクターや結合子はありません。

基本セレクター

全称セレクター: すべての要素を選択します。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。
構文: * ns|* *|*
例: * は文書のすべての要素を選択します。
要素型セレクター: 指定されたノード名を持つすべての要素を選択します。
構文: elementname
例: input はあらゆる <input> 要素を選択します。
クラスセレクター: 指定された class 属性を持つすべての要素を選択します。
構文: .classname
例: .index は "index" クラスを持つあらゆる要素を選択します。
ID セレクター: id 属性の値に基づいて要素を選択します。文書中に指定された ID を持つ要素は1つしかないはずです。
構文: #idname
例: #toc は "toc" という ID を持つ要素を選択します。
属性セレクター: 指定された属性を持つ要素をすべて選択します。
構文: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
例: [autoplay] は autoplay 属性が（どんな値でも）設定されているすべての要素を選択します。

セレクターリスト: , はグループ化の手段であり、一致するすべてのノードを選択します。
構文: A, B
例: div, span は <span> と <div> の両要素に一致します。

子孫結合子: (空白) 結合子は、第1の要素の子孫にあたるノードを選択します。
構文: A B
例: div span は <div> 要素の中にある <span> 要素をすべて選択します。
子結合子: > 結合子は、第1の要素の直接の子に当たるノードを選択します。
構文: A > B
例: ul > li は <ul> 要素の内側に直接ネストされた <li> 要素をすべて選択します。
一般兄弟結合子: ~ 結合子は兄弟を選択します。つまり、第2の要素が第1の要素の後にあり（ただし直後でなくても構わない）、両者が同じ親を持つ場合です。
構文: A ~ B
例: p ~ span は <p> 要素の後にある <span> 要素をすべて選択します。
隣接兄弟結合子: + 結合子は隣接する兄弟を選択します。つまり、第2の要素が第1の要素の直後にあり、両者が同じ親を持つ場合です。
構文: A + B
例: h2 + p は <h2> 要素の後にすぐに続く <p> 要素をすべて選択します。
列結合子: || 結合子は列に所属するノードを選択します。
構文: A || B
例: col || td は <col> 要素のスコープに所属するすべての <td> 要素を選択します。

擬似クラス: : 表記により、文書ツリーの中に含まれない状態情報によって要素を選択することができます。
例: a:visited はユーザーが訪問済みの <a> 要素をすべて選択します。
疑似要素
:: 表記は、 HTML に含まれていないエンティティを表現します。: 例: p::first-line はすべての <p> 要素の先頭行を選択します。

仕様書	状態	備考
Selectors Level 4	草案	`\|\|` 列結合子、グリッド構造セレクター、論理結合子、位置、時系列、リソース状態、言語、 UI の疑似クラス、属性値の選択における ASCII 文字の大文字小文字の区別の有無を示す修飾子を追加。
Selectors Level 3	勧告	`~` 一般兄弟結合子、およびツリー構造の疑似クラスを追加。疑似要素に二重コロン `::` の接頭辞を用いるようにした。追加の属性セレクター。
CSS Level 2 (Revision 1)	勧告	子結合子 `>` および隣接兄弟結合子 `+` を追加。全称セレクターと属性セレクターを追加。
CSS Level 1	勧告	初回定義

疑似クラスおよび疑似要素の詳細は、それぞれの仕様書一覧表をご覧ください。