個人的にまぎらわしいCSSのセレクタ

数あるCSSセレクタのうち、意味がごっちゃになりやすいものをメモした。

次の例では、タイプセレクタのliとclassセレクタの.itemを続けて記述している(間に半角スペースを含めてはいけない)。<li>タグのclass="item"の要素のみにスタイルが適用される。

li.item {
  font-weight: bold;
}

<p class="item">更新のお知らせ</p>
<ul>
  <li>おまけ</li>
  <!--下記要素のみにスタイルが適用される-->
  <li class="item">ハッピーセット</li>
</ul>

複数のセレクタを組み合わせて、ある要素の子要素または孫要素を選択するのが子孫コンピネータ。次の例では、<ul>に含まれる<li>にだけマッチしてスタイルが適用される。

ul li {
  font-weight: bold;
}

<ul>
  <!--style適用範囲 start-->
  <li>ハッピーセット</li>
  <li>ラッキーセット</li>
  <!--style適用 end-->
</ul>
<ol>
  <li>妖怪ミニカー</li>
  <li>妖怪グラス</li>
</ol>

複数のセレクタを組み合わせて、ある要素の子要素のみを選択するのが子孫コンピネータ。次の例では、<ul>に含まれる<li>にだけマッチしてスタイルが適用される。

ul > li {
  font-weight: bold;
}

<ul>
  <!--style適用範囲 start-->
  <li>ハッピーセット</li>
  <li>ラッキーセット</li>
  <!--style適用 end-->
</ul>
<ol>
  <li>妖怪ミニカー</li>
  <li>妖怪グラス</li>
</ol>

セレクタをグループ化すると、1つのスタイル宣言に対して複数のセレクタを割り当てることができる。次の例では、<p>と<li>の両方にマッチしてスタイルが適用される。

p, li {
  font-weight: bold;
}

<!--style適用範囲 start-->
<p>お知らせ</p>
<!--style適用 end-->
<ul>
  <!--style適用範囲 start-->
  <li>妖怪ミニカー</li>
  <li>妖怪グラス</li>
  <!--style適用 end-->
</ul>

下記の本を参考にした。

中安拓也のブログ