Sélecteur CSS «(A ou B) et C»?

Cela devrait être simple, mais j'ai du mal à trouver les termes de recherche.
Disons que j'ai ceci:

<div class="a c">Foo</div>
<div class="b c">Bar</div>

En CSS, comment puis-je créer un sélecteur qui correspond à quelque chose qui correspond à "(.a ou .b) et .c"?

Je sais que je pourrais faire ceci:

.a.c,.b.c {
  /* CSS stuff */
}

Mais, en supposant que je vais devoir faire beaucoup ce genre de logique, avec une variété de combinaisons logiques, y a-t-il une meilleure syntaxe?

y a-t-il une meilleure syntaxe?

L' oropérateur CSS ( ,) n'autorise pas les regroupements. Il s'agit essentiellement de l'opérateur logique de priorité la plus basse dans les sélecteurs, vous devez donc l'utiliser .a.c,.b.c.

Pas encore, mais il y a la :matches()fonction de pseudo-classe expérimentale qui fait exactement cela:

:matches(.a .b) .c {
  /* stuff goes here */
}

Vous pouvez trouver plus d'informations à ce sujet ici et ici . Actuellement, la plupart des navigateurs prennent en charge sa version initiale :any(), qui fonctionne de la même manière, mais sera remplacée par :matches(). Nous devons juste attendre un peu plus avant de l'utiliser partout (je le ferai sûrement).

Si vous avez ceci:

<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>

Et vous ne voulez sélectionner que les éléments qui ont .xet ( .aou .b), vous pouvez écrire:

.x:not(.c) { ... }

mais ce n'est pratique que lorsque vous avez trois "sous-classes" et que vous voulez en sélectionner deux.

Sélection d'une seule sous-classe (par exemple .a):.a.x

Sélection de deux sous-classes (par exemple .aet .b):.x:not(.c)

Sélection des trois sous-classes: .x

Non. Le CSS standard ne fournit pas le genre de chose que vous recherchez.

Cependant, vous voudrez peut-être vous pencher sur LESS et SASS .

Ce sont deux projets qui visent à étendre la syntaxe CSS par défaut en introduisant des fonctionnalités supplémentaires, notamment des variables, des règles imbriquées et d'autres améliorations.

Ils vous permettent d'écrire du code CSS beaucoup plus structuré, et l'un ou l'autre résoudra presque certainement votre cas d'utilisation particulier.

Bien sûr, aucun des navigateurs ne prend en charge sa syntaxe étendue (d'autant plus que les deux projets ont chacun une syntaxe et des fonctionnalités différentes), mais ils fournissent un "compilateur" qui convertit votre code LESS ou SASS en CSS standard, que vous pouvez ensuite déployer sur votre site.