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

Bon, exemple très basique: p.xyest plus important que p, parce que c'est un peu plus spécifique. jsfiddle.net/ftJVX

— anroesti

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
source