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