Discussion :

[Sergejack]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Sergejack]

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

[Muchos]

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[SylvainPV]

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Sergejack]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>