Comment utiliser le sélecteur CSS?

Question

je le CSS suivant:

.foo .bar { 
    background: red; 
} 

Ce qui fonctionne bien pour le code HTML suivant:

<div class="foo"> 
    <div class="bar">I have a red background</div> 
</div> 

Mais je ne peux pas sembler trouver un moyen de réutiliser la définition CSS quand je ne suis pas dans une relation parent/enfant. Par exemple, comment pourrais-je appliquer la même CSS à la DIV suivante:

<div class="???">I want a red background!</div> 

Answer 1

Vous pouvez ajouter sélecteur supplémentaire avec une virgule (,) comme spécifié dans W3C selectors grouping

.foo .bar, .foobar { 
    background: red; 
} 

cela fonctionnerait dans les deux

<div class="foo"> 
    <div class="bar">I have a red background</div> 
</div> 

et

<div class="foobar">I want a red background!</div> 

Answer 2

Vous pouvez utiliser une virgule pour indiquer plusieurs sélecteurs qu'une règle CSS devrait appliquer à

.foo .bar, .??? { 
    background: red; 
} 

Answer 3

Utilisez une liste séparée par des virgules des sélecteurs dans la définition:

.foo .bar, .otherSelector, #someID{ 
    background: red; 
} 

Answer 4

.foo .bar, .redback { 
    background: red; 
} 

fera une magie avec

<div class="redback">I want a red background!</div> 

ou de se débarrasser de hiérarchie et utilisez uniquement

.bar { 
    background: red; 
} 

qui fonctionne dans les deux cas

Answer 5

Essayez

.foo .bar, .foobar { 
    background: red; 
} 

avec

<div class="foo"> 
    <div class="bar">I have a red background</div> 
</div> 

<div class="foobar">I want a red background!</div> 

Answer 6

La définition CSS ".foo .bar" est écrit expressément pour un parent-enfant (relation plus précisément ancêtre-décideur).

Vous pouvez écrire le CSS comme ceci:

.alternate-background { 
    background: red; 
} 

et le code HTML comme ceci:

<div> 
    <div class="alternate-background">I have a red background</div> 
</div> 

qui vous permettra également d'utiliser ceci:

<div class="alternate-background">I want a red background!</div>