CSS セレクター

CSS セレクターモジュールは、要素を選択するパターンを定義し、一連の CSS ルールをその詳細度とともに適用します。 CSS セレクターモジュールには、 60 以上のセレクターと 5 つの結合子が用意されています。他のモジュールは、さらに擬似クラスセレクターと擬似要素が提供されています。

CSS では、セレクターはスタイルを設定したい要素と照合、または選択するために使用されるパターンです。セレクターは JavaScript でも使用され、 NodeList として返すDOMノードを選択することができます。

セレクターは、 CSS でも JavaScript でも、 HTML 要素の型、属性、現在の状態、さらには DOM 内の位置に基づいてターゲットを絞ることができます。結合子は、他の要素との関係に基づいて要素を選択できるようにすることで、要素を選択する際により正確に行えるようにします。

リファレンス

結合子とセパレーター

セレクター

用語

ガイド

CSS セレクターと結合子

CSS セレクターと CSS 擬似モジュールで定義されている、さまざまな種類の単純なセレクターとさまざまな結合子の概要です。

CSS セレクターの構造

CSS セレクターの構造と、CSS セレクターモジュールで紹介されている用語について、「単純なセレクター」から「寛容な相対セレクターリスト」まで解説しています。

擬似クラス

擬似クラスは、文書ツリーには含まれない状態情報に基づいて要素を選択できるようにするセレクターの一覧で、さまざまな CSS モジュールや HTML で定義されています。

学習: CSS セレクター

CSS の構成要素の一部で、チュートリアルとして要素・クラス・ID によるセレクター、属性セレクター、擬似クラスと擬似要素、結合子、カスケード、詳細度、継承、カスケードレイヤーがあります。

セレクターでの :target 擬似クラスの利用

:target 擬似クラスを使って、 URL のフラグメント識別子をターゲット要素にスタイルを設定する方法を学びます。

学習: UI 擬似クラス

さまざまな状態のフォームをスタイル設定するために利用できる、さまざまな UI 擬似クラスについて学びます。

セレクターを使用した DOM 要素の特定

セレクター API を使用すると、 JavaScript でセレクターを使用して DOM から要素ノードを取得できます。

関連概念

仕様書

Specification
Selectors Level 4

関連情報