Sélecteur CSS "(A or B) et C » ?

Question

Cela devrait être simple, mais je ne parviens pas à trouver les termes de recherche pour elle.
Disons que j’ai ceci :

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

Je sais que je pourrais le faire :

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

Answer 1

<blockquote> <p>y a-t-il une meilleure syntaxe ?</p> <p>Lol Des CSS <code></code> operator ( <code></code> ) ne permet pas de regroupements. C’est essentiellement l’opérateur logique-priorité la plus basse dans les sélecteurs, vous devez utiliser <code></code> .</p></blockquote>

Answer 2

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 souhaitez sélectionner les éléments qui ont .x et (.a ou .b), vous pourriez écrire:

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

mais c'est pratique seulement quand vous avez trois "sous-classes" et que vous souhaitez sélectionner deux d'entre eux.

Ne sélectionner qu'une seule sous-classe (par exemple, .a): .a.x

La sélection de deux sous-classes (par exemple, .a et .b): .x:not(.c)

La sélection de l'ensemble des trois sous-classes: .x

Answer 3

Pas de. CSS Standard n'offrent pas le genre de chose que vous cherchez.

Cependant, vous voudrez peut-être examiner en MOINS et SASS.

Ce sont deux projets qui visent à étendre la CSS par défaut de la syntaxe par l'introduction de fonctionnalités supplémentaires, y compris des variables, imbriqués les règles, et d'autres améliorations.

Ils vous permettent d'écrire beaucoup plus structurée code CSS, et l'un d'eux sera presque certainement résoudre votre cas d'utilisation particulier.

Bien sûr, aucun des navigateurs prennent en charge leur syntaxe étendue (surtout depuis que les deux projets ont chacun différente de la syntaxe et les fonctions), mais ce qu'ils font est de fournir un "compilateur" qui convertit vos MOINS ou code SASS en CSS standard, que vous pouvez ensuite déployer sur votre site.