最低限覚えておきたい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;
}

🚕 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)