More than 3 years have passed since last update.

セレクタを並べて記述【CSS】対象を絞り込む

Last updated at 2022-03-26Posted at 2022-03-26

HTML

<p class="item _current">サンプル1</p>
<p class="item">サンプル2</p>

CSS

.item._current { color: red; }

.item { font-style: italic; }

セレクタを区切り文字・空白なしで記述（結合・連結）すると、対象を絞り込むことができる。

例：クラスセレクタ「item」とクラスセレクタ「_current」を並べて、「サンプル1」だけを赤文字にしている。