CSS セレクター
CSS セレクターは、一連の CSS のルールが適用される要素を定義します。
Note: 親のアイテム、親の兄弟、親の兄弟の子を選択するセレクターや結合子はありません。
基本セレクター
- 全称セレクター
-
すべての要素を選択します。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。
構文:*
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
は<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>
要素をすべて選択します。 - 列結合子 Experimental
-
||
結合子は列に所属するノードを選択します。
構文:A || B
例:col || td
は<col>
要素のスコープに所属するすべての<td>
要素を選択します。
擬似表記
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Selectors Level 4 | 草案 | || 列結合子、グリッド構造セレクター、論理結合子、位置、時系列、リソース状態、言語、 UI の擬似クラス、属性値の選択における ASCII 文字の大文字小文字の区別の有無を示す修飾子を追加。 |
Selectors Level 3 | 勧告 | ~ 一般兄弟結合子、およびツリー構造の擬似クラスを追加。擬似要素に二重コロン :: の接頭辞を用いるようにした。追加の属性セレクター。 |
CSS Level 2 (Revision 1) | 勧告 | 子結合子 > および隣接兄弟結合子 + を追加。全称セレクターと属性セレクターを追加。 |
CSS Level 1 | 勧告 | 初回定義 |