Sélectionner récursivement tous les éléments enfants en CSS

407

Comment pouvez-vous sélectionner tous les éléments enfants de manière récursive?

div.dropdown, div.dropdown > * {
    color: red;
}

Cette classe ne lance qu'une classe sur le nom de classe défini et tous les enfants immédiats. Comment pouvez-vous, d'une manière simple, choisir tous les nœuds enfants comme ceci:

div.dropdown, 
div.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}
css css-selectors Clarkk
la source

Réponses:

621

Utilisez un espace blanc pour faire correspondre tous les descendants d'un élément:

div.dropdown * {
    color: red;
}

x ycorrespond à chaque élément y qui se trouve à l'intérieur de x , aussi profondément qu'il soit imbriqué - enfants, petits-enfants, etc.

L'astérisque *correspond à n'importe quel élément.

Spécification officielle: CSS 2.1: Chapitre 5.5: Sélecteurs descendants

anroesti
la source
cela fonctionne, mais maintenant il remplace toutes les autres classes même si elles ont une priorité plus élevée .. (elles sont placées plus tard dans le fichier css)
clarkk
Le sélecteur joue également un rôle dans la priorité des propriétés, pas seulement dans leur emplacement dans le fichier. Vous pouvez essayer d'ajouter «! Important» à vos valeurs, par exemplecolor: red !important;
anroesti
Je sais, c'est un peu moche. Vous pouvez plutôt essayer d'écrire des sélecteurs plus précis, il y a de fortes chances que cela fonctionne aussi. (par exemple #head ul→ #head ul#navi)
anroesti
2
Bon, exemple très basique: p.xyest plus important que p, parce que c'est un peu plus spécifique. jsfiddle.net/ftJVX
anroesti
1
que faire si je veux que tous les enfants qui avaient une classe spécifique?
MEM
144

La règle est la suivante: 

A B

B en tant que descendant de A

A > B

B comme enfant de A

Donc 

div.dropdown *

et pas 

div.dropdown > *
Abdennour TOUMI
la source