raccourcissement des sélecteurs CSS complexes

Question

Je suis en train de raccourcir certains sélecteurs CSS pour faciliter la lecture par exemple:

.a>.c,.b>.c 

Je pensais que je l'avais utilisé entre parenthèses dans le passé pour le groupe le syndicat avant de poursuivre plus sélecteurs

(.a,.b)>.c 

Mais il semble que ce n'est pas valide css.

Est-ce que je rêve que je l'ai fait avant ou est-il un moyen simple? Mon principal souci est la lisibilité du CSS plutôt que le nombre d'octets, mais c'est un autre avantage évident de raccourcir le sélecteur comme ci-dessus.

Answer 1

Parenthèses ne sont pas utilisés comme celui-ci en CSS. S'il vous plaît voir le Selectors Level 3 W3C Recommendation.

Si .c est que jamais l'enfant de .a et .b vous pouvez simplement utiliser:

.c { } 

Si .a et .b diffèrent de .x (en supposant .x a un enfant .c), vous pouvez leur donner une classe spécifique ou data-* attribute:

<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> 

et le style en utilisant:

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

Sinon, il n'y a rien beaucoup illisible ce que vous avez déjà. Si vous voulez le rendre encore plus facile à lire, il suffit de l'espacer et de placer chaque sélecteur sur une nouvelle ligne:

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