web-dev-qa-db-fra.com

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 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 beaucoup faire avec ce type de logique, avec une variété de combinaisons logiques, y a-t-il une meilleure syntaxe?

htmlcsscss-selectors
152
Josh

y a-t-il une meilleure syntaxe?

L'opérateur CSS 'or (,] n'autorise pas les regroupements. Il s'agit essentiellement de l'opérateur logique ayant la priorité la plus faible dans les sélecteurs. Vous devez donc utiliser .a.c,.b.c.

122
Matt Ball

Pas encore, mais il y a la fonction expérimentale :matches() de pseudo-classe 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 d’utiliser ceci partout (je le ferai sûrement).

21
Metalcoder

Si vous avez ceci:

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

Et vous voulez seulement sélectionner les éléments qui ont .x et (.a ou .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 .a et .b): .x:not(.c)

Sélection des trois sous-classes: .x

12
Šime Vidas

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

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

Ces deux projets 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 d’eux résoudra presque certainement votre cas d’utilisation particulier.

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

4
Spudley