CSS セレクター

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 || B
例: col || td は <col> 要素のスコープに所属するすべての <td> 要素を選択します。

疑似クラス

疑似クラスは文書ツリーの中に含まれない状態情報によって要素を選択します。

例: a:visited はユーザーが訪問済みの <a> 要素をすべて選択します。

疑似要素

疑似要素は HTML に含まれていないエンティティを表現します。

例: p::first-line はすべての <p> 要素の先頭行を選択します。

仕様書

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

関連情報

• CSS 詳細度