属性セレクタで特定の2つの要素を指定する方法を教えて下さい。

Question

(CSS)
.wrap-04 label,
.wrap-08 label {
  background-color:red;
}

CSSのセレクタを属性セレクタを用いて「.wrap-04と.wrap-08」をまとめて記述する方法はありますでしょうか。
「.wrap-0x」は他にも設定されています。

[属性セレクタ] label) {
background-color:red;
}

Answer 1

いちおう、規格書には:isという擬似クラスが存在します（MDN）。:is(.wrap-04, .wrap-08) labelのように書けます。

ただし、「:-moz-anyや:webkit-anyなど、ベンダプレフィックス付きでしか使えない」あるいは「パソコンのChromeでは設定変更しないと使えない」など、現時点ではまともに使える状況ではありません（Can I use）。

Comments

[maisumakun]

「SCSSか何かで書いてコンパイルする」という方策もありかもしれません。

[taka_oct092018]

maisumakun様
回答ありがとうございます。
質問自体に無理がありました。
「:is」のことは初めて知りました。勉強になります。

Answer 2

シンプルな形で実現する方法は、思いつかないです。

[class*="wrap-0"]:not(.wrap-01):not(.wrap-02):not(.wrap-03):not(.wrap-05):not(.wrap-06):not(.wrap-07):not(.wrap-09) label {
  background-color:red;
}

[class*="wrap-0"] label {
  background-color: red;
}
[class*="wrap-0"]:not([class*="wrap-04"]):not([class*="wrap-08"]) label {
  background-color: transparent;
}

// シンプルにしたい、という意図ならSass (SCSS) だと、以下のような記述もできると思います。
.wrap-04,
.wrap-08 {
  label {
    background-color: red;
  }
}

CSSで「or」的な指定をするときは、「,」で区切るのが一般なので..
(思いついたら追記します。)

Comments

[taka_oct092018]

new1ro様

回答ありがとうございます。
質問自体に無理があったのに丁寧な解説をして頂き感謝しております。