css - 複雑な CSS セレクターの短縮

Question

たとえば、読みやすくするためにいくつかの css セレクターを短縮しようとしています。

.a>.c,.b>.c

過去に丸括弧を使用して共用体をグループ化し、さらにセレクターを続行したと思いました

(.a,.b)>.c

しかし、これは有効な css ではないようです。

私は以前にこれをやったと夢見ていましたか、それとも簡単な方法はありますか?

私の主な関心事は、バイト数ではなく css の読みやすさですが、それは上記のようにセレクターを短くするもう 1 つの明らかな利点です。

Answer 1

CSS では、このように括弧は使用されません。Selectors Level 3 W3C Recommendationを参照してください。

.cの子である場合は.a、次の.bように単純に使用できます。

.c { }

.aと.bが異なる場合(子があると.x仮定)、特定のクラスまたはdata-* 属性を与えることができます:.x.c

<div class="a t" <!-- or --> data-t><span class="c"></span></div>
<div class="b t" <!-- or --> data-t><span class="c"></span></div>
<div class="x"><span class="c"></span></div>

そして、次を使用してスタイルを設定します。

.t > .c { }
/* Or */
[data-t] > .c { }

そうでなければ、あなたがすでに持っているものについて非常に読みにくいものは何もありません。さらに読みやすくしたい場合は、少しスペースを空けて、各セレクターを新しい行に配置します。

.a > .c,
.b > .c {
    ...
}