Pilih semua elemen anak secara rekursif dalam CSS

407

Bagaimana Anda dapat memilih semua elemen anak secara rekursif?

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

Kelas ini hanya melempar kelas pada className yang ditentukan dan semua anak langsung. Bagaimana Anda bisa, dengan cara sederhana, memilih semua childNodes seperti ini:

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

css css-selectors

— clarkk
sumber

Jawaban:

621

Gunakan ruang putih untuk mencocokkan semua keturunan elemen:

div.dropdown * {
    color: red;
}

x ycocok dengan setiap elemen y yang ada di dalam x , betapapun dalamnya bersarang - anak-anak, cucu, dan sebagainya.

Tanda bintang * cocok dengan elemen apa pun.

Spesifikasi Resmi: CSS 2.1: Bab 5.5: Selektor Descendant

— anroesti
sumber

itu berfungsi, tetapi sekarang mengesampingkan semua kelas lain bahkan jika mereka memiliki prioritas yang lebih tinggi .. (mereka kemudian ditempatkan dalam file css)

— clarkk

Pemilih juga memainkan peran dalam prioritas apa yang dimiliki properti, bukan hanya di tempat di mana file itu muncul. Anda dapat mencoba menambahkan `! color: red !important;

— Important`

Saya tahu, ini agak jelek. Anda bisa mencoba menulis penyeleksi yang lebih tepat, kemungkinan, ini akan berhasil juga. (mis. #head ul→ #head ul#navi)

— anroesti

Oke, contoh yang sangat mendasar: p.xylebih penting daripada p, karena lebih spesifik. jsfiddle.net/ftJVX

— anroesti

bagaimana jika saya ingin semua anak yang memiliki kelas khusus?

— MEM

144

Aturannya adalah sebagai berikut:

A B

B sebagai keturunan A

A > B

B sebagai anak dari A

Begitu

div.dropdown *

dan tidak

div.dropdown > *

— Abdennour TOUMI
sumber