複数のclassを同時にセレクタに指定する

投稿者: | 2018年11月5日

複数のセレクタに同じスタイルを適用する

よく使うのが、カンマ(,)区切りでセレクタに定義するパターンです。

<p class='sample1'>
  red Text.
</p>
<div class='sample1'>
  red Text.
</div>
p.sample1,div.sample1 {
  color: red;
} 

複数のセレクタを同時に使う

困るのは2個以上のセレクタが指定されたときのみスタイルを適用するcssを書きたい時です。
ドット(.)で区切ると AND条件で適用できます。

<div class='sample'>
  black Text.
</div>
<div class='sample code'>
  red Text.
</div>
div.sample {
  color: black;
}
div.sample.code {
  color: red;
}
カテゴリー: CSS