【初心者向け・CSS】2つ以上の指定するClass名をもつ要素にスタイルを適用する方法(AND条件、かつ)

HTML/CSS/Sass

先日、クラスをAND条件で指定してスタイルを適用する際に少し躓いたので記事にしました。

sample1とsample2というクラスがあると仮定して、説明します。

「sample1」と「sample2」のどちらのクラスも持つ要素にスタイルを指定する場合

半角スペースを入れずに、指定するクラスを並べます。

.sample1.sample2 {
}

「sample1」の中の「sample2」にスタイルを指定する場合

クラスの間に半角スペースを1つ置きます。

この場合、「sample1」は「sample2」の親要素である必要があります。

.sample1 .sample2 {
}

「sample1」と「sample2」に同じスタイルを指定する場合

クラスの間にコロン(,)を置きます。

.sample1, .sample2 {
}
タイトルとURLをコピーしました