CSS équivalent à un selecteur "OU"

Comme vous le savez, en CSS, le seul "ou" qui existe est la virgule et ne s'utilise qu'en début d'une chaîne de sélecteurs.

Par exemple on pourrait avoir les déclarations CSS suivantes :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.Animal .Mamifere .Felin .Chat .Nez , .Animal .Mamifere .Felin .Tigre .Nez , .Animal .Mamifere .Felin .Lion .Nez { background-image: url('museau-felin-01.jpg') }   .Animal .Mamifere .Felin .Lynx .Nez { background-image: url('museau-felin-02.jpg') }   .Animal .Mamifere .Canin .Chien .Nez , .Animal .Mamifere .Canin .Loup .Nez { background-image: url('museau-canin.jpg') }

---

C'est un peu lourd et on peut donc regretter de ne pas pouvoir utiliser un "ou" au sein de la chaîne de sélecteurs

Code:

---

1 2 3 4 5 6 7

.Animal .Mamifere .Felin (.Chat ou .Tigre ou .Lion) .Nez { background-image: url('museau-felin-01.jpg') }   .Animal .Mamifere .Canin (.Chien ou .Loup) .Nez { background-image: url('museau-canin.jpg') }

---

Mais il est possible d'arriver au résultat d'un ou grâce au selecteur ":not". En effet en combinant le "et" naturel du CSS et le ":not" on peut obtenir l'équivalent logique d'un "ou".

Code:

---

1 2 3 4 5 6 7

.Animal .Mamifere .Felin :not(:not(.Chat):not(.Tigre):not(.Lion)) .Nez { background-image: url('museau-felin-01.jpg') }   .Animal .Mamifere .Canin :not(:not(.Chien):not(.Loup)) .Nez { background-image: url('museau-canin.jpg') }

---

Code:

---

!(!x && !y) <=> x || y

---

Méa Culpa, autant ce type de chaîne de sélecteurs fonctionnent en jQuery, autant CSS n'accepte pas :not dans :not

N'est-ce pas justement l'intérêt des classes, de compenser ces limites ? Ex:

Code:

---

1 2 3 4 5 6 7 8 9

.Felin .Nez { background-image: url('museau-felin-01.jpg'); } .Lynx .Nez { background-image: url('museau-felin-02.jpg') } .Canin .Nez { background-image: url('museau-canin.jpg') }

---

En outre, l'opérateur OU peut se placer n'importe où dans la chaîne, pas forcément en début de ligne.

Oui on peut soit rajouter une classe commune, soit leur ajouter un préfixe/suffixe commun

Code:

---

1 2	[class~="felin"]{ } [class^="felin-"]{ }

---

Je ne parle pas de chaîne de caractère mais de chaîne de sélecteurs.

Et non, on ne peut pas y mettre une virgule ou bon nous semblerait.

Sinon ceci fonctionnerait

Code:

---

1 2 3

.Cartoon.Animal .Mamifere .Felin .Chat,.Tigre,.Lion .Nez { background-image: url('/cartoon/museau-felin-01.jpg') }

---

Syntaxiquement valable, "sémantiquement" erroné.

Par ailleurs, si on contourne le problème avec des classes plus explicites, on s'éloigne de la simplicité.

Code:

---

1 2 3 4 5 6 7 8 9 10 11

.CartoonChat .nez , .CartoonTigre.Nez , .CartoonLion .Nez { background-image: url('/cartoon/museau-felin-01.jpg') }   .3DChat .nez , .3DTigre.Nez , .3DLion .Nez { background-image: url('/cartoon/museau-felin-01.jpg') }

---

=> tout le HTML doit changer pour chaque variante.

Alors qu'à la base on souhaiterait :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div class="Cartoon Animal"> <!-- Changer "Cartoon" en "3D" pour illustrations en 3D, ou par <blanc> pour illustration photo --> <div class="Mamifere"> <div class="Felin"> <div class="Chat"> <div class="Nez">Le museau du chat est...</div> <div class="Pattes">Les pattes du chat ont la particularité...</div> <div class="Queue">Ne tirer qu'en cas d'urgence.</div> </div>   <div class="Tigre"> <div class="Nez">Le museau du tigre est...</div> <div class="Pattes">Les pattes du tigre sont...</div> <div class="Queue">Comestible si vous êtes les plus rapide...</div> </div> </div> </div> </div>

---