最低限覚えておきたいCSSのセレクタ


CSSで対象の要素を選択するための「セレクタ」の基本的な記述方法について整理してみました。ワイルドカードは意外と便利で使い勝手がいいので覚えておきたいです!

😸 要素名#id名:idセレクタ

要素につけたidによるCSSセレクタです。

span#sample_id { color: red; }

🏀 要素名.クラス名:classセレクタ

クラス名をつけた要素のCSSセレクタです。

span.sample { color: green; }

🎂 要素名:first-child:最初の子要素のセレクト

ある要素ないで最初に現れる子要素に対するCSSセレクタです。

li:first-child { color: green; }

🚕 セレクタ セレクタ:下の階層の子・孫要素

下の階層の子・孫要素のCSSセレクタです。

p strong { color: green; }

🎃 セレクタ>セレクタ:直下の階層の子要素

直下の階層の子要素のCSSセレクタです。

p > strong { color: green; }

🐹 セレクタ+セレクタ:隣接する要素

隣接する要素のCSSセレクタです。

p > strong { color: green; }

🎉 CSSセレクタにワイルドカード

セレクタ 説明
* 〜を含む
^ 〜で始まる
$ 〜で終わる
# classが`some-word`を含むspanタグ
span[class*="some-word"] {
color: green;
}
# classが`prefix-`で始まるspanタグ
span[class^="prefix-"] {
color: green;
}
# class属性が`-suffix`で終わるspanタグ
span[class$="-suffix"] {
color: green;
}

🏈 参考リンク

📚 おすすめの書籍