CSS セレクターは、一連の CSS の規則が適用される要素を定義します。一連の要素を選択するという点で XPath に似ています。

単純セレクター

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

結合子

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

疑似クラス

疑似クラスは文書ツリーの中に含まれない状態情報によって要素を選択します。
例: a:visited はユーザーが訪問済みの <a> 要素をすべて選択します。

疑似要素

疑似要素は HTML に含まれていないエンティティを表現します。
例: p::first-line はすべての <p> 要素の先頭行を選択します。

仕様書

仕様書 状態 備考
Selectors Level 4 草案 || 列結合子を追加。
Selectors Level 3 勧告 ~ 一般兄弟結合子を追加。
疑似要素に二重コロン :: の接頭辞を用いるようにした。
CSS Level 2 (Revision 1) 勧告 子結合子 > および隣接兄弟結合子 + を追加。
全称セレクター属性セレクターを追加。
CSS Level 1 勧告 初回定義

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

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, silverskyvicto, Eai
最終更新者: mfuji09,