CSS セレクター

すべての要素を選択します。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。 構文: * ns|* *|* 例: * は文書のすべての要素を選択します。

指定されたノード名を持つすべての要素を選択します。 構文: elementname 例: input はあらゆる <input> 要素を選択します。

指定された class 属性を持つすべての要素を選択します。 構文: .classname 例: .index は "index" クラスを持つあらゆる要素を選択します。

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> 要素の先頭行を選択します。