”. Dalam kasus seperti itu, “ :memiliki() ” pseudo-class pemilih induk digunakan.
Posting ini akan menjelaskan:
- Bagaimana Menata Elemen Induk dengan Menentukan Elemen Anaknya?
- Bagaimana Cara Memilih Semua Elemen Anak?
- Bagaimana Cara Memilih Semua Elemen Anak Langsung?
Bagaimana Menata Elemen Induk dengan Menentukan Elemen Anaknya?
Pertama, buat file HTML yang memiliki dua elemen 'div' sebagai berikut:
- Tambahkan dua ' ” elemen dengan kelas yang sama “ parent-div ”.
- Yang pertama berisi dua ' ” elemen.
- Elemen “
” kedua berisi “ ' dan ' ”: < div kelas = 'orang tua-div' >
< p > Halo < / p >
< p > dunia < / p >
< / div >
< div kelas = 'orang tua-div' >
< h1 > Hai < / h1 >
< p > Saya memiliki tag 'h1'. < / p >
< / div >Jika diperlukan untuk menata elemen “
” yang memiliki elemen “ ”, lalu kita dapat menyesuaikan gaya elemen induk dengan memegang anaknya. Untuk tujuan ini, kita dapat menggunakan ' :memiliki() pemilih.
Dari kedua elemen “
”, pilih elemen yang berisi elemen “” menggunakan “ .class-name:has(anak-nama) ”:
.parent-div : memiliki ( h1 ) {
warna latar belakang : #103e6d ;
warna : kerang laut ;
lebar : 150px ;
tinggi : 150px ;
radius perbatasan : lima puluh% ;
perataan teks : tengah ;
}Di sini, kami telah menerapkan properti CSS berikut pada elemen induk:
- “ warna latar belakang ” digunakan untuk menentukan warna latar belakang elemen.
- “ warna ” menentukan warna teks elemen.
- “ lebar ” digunakan untuk menentukan lebar elemen.
- “ tinggi ” menentukan ketinggian elemen.
- “ radius perbatasan ” properti digunakan untuk mengatur sudut membulat dari elemen.
- “ perataan teks ” menentukan perataan teks.
Keluaran
Bagaimana Cara Memilih Semua Elemen Anak?
Untuk memilih elemen anak dengan bantuan pemilih induk, lihat contoh yang diberikan.
Contoh
Terapkan langkah-langkah berikut untuk membuat halaman HTML:
- Tambahkan elemen div yang berisi dua ' ' tag dan ' ” tag yang memiliki kelas “ anak-div ”.
- Anak ' div ” mengandung elemen “
< div kelas = 'orang tua-div' >”:
< p > Halo < / p >
< p > dunia < / p >
< div kelas = 'anak-div' >
< p > saya anak div < / p >
< / div >
< / div >Kita dapat memilih elemen anak melalui induk “
' kelas. Ini tidak hanya akan memilih langsung “ p ” elemen tetapi juga memilih yang bersarang “ p ” elemen: .parent-div p {
warna latar belakang : #7F167F ;
font-family : kursif ;
ukuran huruf : 25px ;
perataan teks : tengah ;
warna : asap putih ;
}Keluaran
Bagaimana Cara Memilih Semua Elemen Anak Langsung?
Untuk memilih anak langsung dari div induk, kita dapat menggunakan tombol “ > ' simbol. Ini akan membantu untuk memilih semua elemen 'p' yang merupakan anak langsung dari parent '
”. Misalnya, kami telah menerapkan properti CSS berikut: .parent-div > p {
warna latar belakang : #7F167F ;
font-family : kursif ;
ukuran huruf : 30px ;
perataan teks : tengah ;
warna : asap putih ;
}“ font-family ” menentukan font elemen yang dipilih dan “ ukuran huruf ” digunakan untuk menentukan ukuran font:
Keluaran
Kami telah membahas tentang pemilih induk CSS dalam HTML dan CSS.
Kesimpulan
Di CSS, ' :memiliki() ” pemilih digunakan sebagai kelas semu pemilih induk. Ini terutama digunakan untuk memilih elemen induk. Contohnya, ' .parent-div:has(h1) ” memilih elemen induk yang memiliki “ ” elemen. Untuk memilih elemen anak dari elemen induk, gunakan “ .parent-div p ”. Pernyataan kondisi juga dapat digunakan untuk memilih semua elemen anak langsung. Artikel ini telah menjelaskan pemilih induk CSS dengan contoh.
- Anak ' div ” mengandung elemen “