CSS セレクタリファレンスマニュアル

CSS セレクタ

CSS セレクタは「見つける」（または選択）したいスタイルを設定する HTML 要素を選択するために使用されます。

私たちの CSS セレクタテストを使用して、異なるセレクタをデモンストレーションします。

CSS シンプルセレクタ

シンプルセレクタは、要素名、id、クラスに基づいて要素を選択します。また、汎用セレクタ（*）。

セレクタ 例 例の説明
要素 p すべての <p> 要素を選択します。
#id #firstname id="firstname" を持つ要素を選択します。
* * すべての要素を選択します。
.class .intro class="intro" を持つすべての要素を選択します。

CSS 属性セレクタ

属性セレクタは特定の属性セットを持つ HTML 要素を選択します。

セレクタ 例 例の説明
[attribute] [target] target 属性を持つすべての要素を選択します。
[attribute=value] [target=_blank] target="_blank" 属性を持つすべての要素を選択します。
[attribute~=value] [title~=flower] title 属性に「flower」が含まれるすべての要素を選択します。
[attribute|=value] [lang|=en] lang 属性値が「en」で始まるすべての要素を選択します。
[attribute^=value] a[href^="https"] src 属性値が「https」で始まるすべての <a> 要素を選択します。
[attribute$=value] a[href$=".pdf"] src 属性が「.pdf」で終わるすべての <a> 要素を選択します。
[attribute*=value] a[href*="codew3c"] href 属性値に「abc」サブストリングが含まれるすべての <a> 要素を選択します。

CSS 嵌套選択子

セレクタ 例 例の説明
& & 要素にスタイルを適用する際には、他の要素の文脈で要素を指定します