【CSS】セレクタの指定方法まとめ

こんにちは、マリンです。

プラグインのCSSのコードを読んでて、

今更ながらセレクタの指定方法の認識が曖昧だったことに気づいたので、

忘れないうちにまとめておくことにしました。

こちらを参考にさせていただきました。

子供セレクタ - CSSの基本書式 - スタイルシート入門

基本

ユニバーサルセレクタ

ページ内の全ての要素を指定するセレクタ。

* { }

タイプセレクタ

ページ内の要素を指定するセレクタ。 bodyやul、pなどのタグ。

要素名 { }

IDセレクタ

/* 全ての指定ID属性 */
#属性値 { }

/* 指定要素下のID属性 */
要素名#属性値 { }

Classセレクタ

/* 全ての指定class属性 */
.属性値 { }

/* 指定要素下のclass属性 */
要素名.属性値 { }

複数セレクタ

セレクタ1, セレクタ2, セレクタ3, ... { }

応用

子供セレクタ

親子関係の子要素を指定する場合。

親要素 > 子要素 { }

子孫セレクタ

子要素、孫要素などの子孫要素を指定する場合。

/* 半角スペース区切り */
親要素 子孫要素 { }

隣接（兄弟）セレクタ

隣接要素と対象要素が直接隣接している時に指定する場合。

両方とも同一親要素の子にあたり、

先の要素が「兄」、次が「弟」になるため、

隣接兄弟セレクタとも言う。

隣接要素 + 対象要素

属性セレクタ

属性や属性値を特定して要素を指定する場合のあれこれ。（idやclassも含まれる）

属性を指定する

/* 指定属性が設定されている要素 */
要素名[属性名] { }

p[title] { }

指定属性に特定の値が設定されている要素

要素名[属性名="値"] { }

p[id="main"] { }

属性の値に指定の値が設定されている要素

「class属性の値に"main"が含まれているdiv要素」のように指定したい時。

要素名[属性名~="値"] { }

div[class~="main"] { }  

属性値が一致する要素

「lang属性の値で"en"と一致、または"en-~"で始まるものと一致するもの」のように指定したい時。

要素名[属性名|= "値"] { }

/* 全体でlang属性の値が"en"または"en-~"のもの*/
*[lang|="en"] { } 

指定の属性に特定の値が全て設定されているもの

「class属性の値に"foo"と"bar"の両方が設定されているもの」のように指定したい時。

属性値属性値 { }

/* classにcontentsとmainが両方あるもの */
.contents.main { }