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
属性が(どんな値でも)設定されているすべての要素を選択します。
グループ化セレクター
結合子
- 子孫結合子
-
" " (空白) 結合子は、第 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>
要素をすべて選択します。 - 列結合子 Experimental
-
||
結合子は列に所属するノードを選択します。 構文:A || B
例:col || td
は<col>
要素のスコープに所属するすべての<td>
要素を選択します。
擬似表記
仕様書
Specification |
---|
Selectors Level 4 |