CSS セレクターは CSS のルールのセットを適用する要素を定義します。

基本セレクター

要素型セレクター
指定されたノード名に一致するすべての要素を選択します。
構文: 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:visited はユーザーが訪問済みの <a> 要素をすべて選択します。

疑似要素

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

仕様書

仕様書 策定状況 コメント
Selectors Level 4 草案  
Selectors Level 3 勧告  
CSS Level 2 (Revision 1) 勧告  
CSS Level 1 勧告 Initial definition.

ブラウザー対応状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 1.0 (1.7 or earlier) 3.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.5 1.0 (1.9.2) ? ? 3.2

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

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