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 属性が（どんな値でも）設定されているすべての要素を選択します。

グループ化セレクター

セレクターリスト

, はグループ化の手段であり、一致するすべてのノードを選択します。
構文: A, B
例: div, span は <span> と <div> の両要素に一致します。

結合子

子孫結合子

  (空白) 結合子は、第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> 要素をすべて選択します。

列結合子 

|| 結合子は列に所属するノードを選択します。
構文: A || B
例: col || td は <col> 要素のスコープに所属するすべての <td> 要素を選択します。

擬似表記

擬似クラス

: 表記により、文書ツリーの中に含まれない状態情報によって要素を選択することができます。
例: a:visited はユーザーが訪問済みの <a> 要素をすべて選択します。

疑似要素

:: 表記は、 HTML に含まれていないエンティティを表現します。

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

仕様書

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

関連情報

• CSS 詳細度