Selecione todos os elementos filhos recursivamente em CSS

407

Como você pode selecionar todos os elementos filhos recursivamente?

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

Essa classe somente lança uma classe no className definido e em todos os filhos imediatos. Como você pode, de uma maneira simples, escolher todos os childNodes como este:

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

css css-selectors

— Clark
fonte

Respostas:

621

Use um espaço em branco para corresponder a todos os descendentes de um elemento:

div.dropdown * {
    color: red;
}

x ycorresponde a todos os elementos y que estão dentro de x , por mais profundamente aninhados que sejam - filhos, netos e assim por diante.

O asterisco *corresponde a qualquer elemento.

Especificação oficial: CSS 2.1: Capítulo 5.5: Seletores descendentes

— anroesti
fonte

ele funciona, mas agora ele substitui todas as outras classes, mesmo que tenham uma prioridade mais elevada .. (eles são colocados posteriormente no arquivo css)

— clarkk

O seletor também desempenha um papel na prioridade das propriedades, não apenas no local em que elas aparecem. Você pode tentar adicionar `! Important` aos seus valores, por exemplo:color: red !important;

— anroesti

Eu sei, é um pouco feio. Você pode tentar escrever seletores mais precisos, é provável que isso funcione também. (por exemplo, #head ul→ #head ul#navi)

— anroesti

Ok, exemplo muito básico: p.xyé mais importante que p, porque é mais específico. jsfiddle.net/ftJVX

— anroesti

e se eu quiser todo filho que tenha uma classe específica?

— MEM

144

A regra é a seguinte:

A B

B como descendente de A

A > B

B como filho de A

assim

div.dropdown *

e não

div.dropdown > *

— Abdennour TOUMI
fonte