l08084のブログ

不老不死になりたい

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

イントロ

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

タイプセレクタとclassセレクタの併用

次の例では、タイプセレクタ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>

下記の本を参考にした。

https://www.amazon.co.jp/dp/B00VUS6WOE/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1