接頭辞/接尾辞が共通のカンマ区切りのCSSセレクタを簡略化

Question

接頭辞/接尾辞が共通のカンマ区切りのCSSセレクタを簡略化できますか？

私の現在のスタイルは、（はるかに長いが）次のようになります。

html:lang(qw) div[data-domain*='abc.com'], html:lang(qw) div[data-domain*='def.com'], html:lang(qw) div[data-domain*='ghi.com'], html:lang(qw) div[data-domain*='jkl.com'] { 
    display: none!important; 
} 

次のようなものが可能である場合、私は思ったんだけど：

html:lang(qw) div[data-domain*=('abc.com', 'def.com', 'ghi.com', 'jkl.com')] { 
    display: none!important; 
} 

Answer 1

コメントを1として、これは今は普通のCSSでは不可能です。セレクタを短くする唯一のオプションは、SASS（Syntheticically Awesome StyleSheets）のようなプリプロセッサを使用することです。 SASSでは、より読みやすく短いコードを書くことができます。 SASS（*.scss）ファイルを自分のコンピュータ上のプレーンCSSにコンパイルすることができます。そのため、サーバ上にあるときには、以前のCSSと同じように、すべてのブラウザで理解できます。ユーザーからの特別な要件はありません。

この場合、for-each loopを使用できます。

@each $domain in 'abc.com', 'def.com', 'ghi.com', 'jkl.com' { 
    html:lang(qw) div[data-domain*='#{$domain}'] { 
    display: none !important; 
    } 
} 

これは、以下のCSSをもたらすであろう。これらのような

html:lang(qw) div[data-domain*='abc.com'] { 
    display: none !important; 
} 

html:lang(qw) div[data-domain*='def.com'] { 
    display: none !important; 
} 

html:lang(qw) div[data-domain*='ghi.com'] { 
    display: none !important; 
} 

html:lang(qw) div[data-domain*='jkl.com'] { 
    display: none !important; 
}