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

🐠 最後の要素のセレクト:要素名:last-child

p:last-child {
color: blue;
}

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

下の階層の子・孫要素の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;
}

🐰 参考リンク

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍