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