Untuk membuat pemilih anak CSS, Anda menggunakan dua pemilih. Penggabung anak memilih elemen yang cocok dengan pemilih kedua dan merupakan anak langsung dari pemilih pertama
Operator mempermudah menemukan elemen yang ingin Anda gaya dengan properti CSS
Membuat kombinator
Pemilih anak CSS memiliki dua pemilih yang dipisahkan oleh simbol >
- Pemilih pertama menunjukkan elemen induk
- Pemilih kedua menunjukkan elemen anak yang akan diberi gaya CSS
The example below selects all
elements that are children of the
Contoh Salinan
div > p { background-color: lightblue; }
Cobalah Belajar Langsung di Udacity
Memilih elemen anak pertama
Pemilih CSS yang menggunakan simbol > hanya memilih turunan langsung. Untuk menemukan anak pertama, CSS perlu menyertakan :first-child
Contoh berikut menunjukkan hasil saat kita menulis div > p:first-child { background-color: lightblue; }0 di CSS dan hanya memilih anak pertama untuk diberi gaya
Contoh Salinan
div > p:first-child { background-color: lightblue; }_
Cobalah Belajar Langsung di Udacity
Menggunakan CSS untuk memilih anak kedua
Anda dapat menemukan anak kedua yang memiliki tipe tertentu dan orang tua dengan div > p:first-child { background-color: lightblue; }1
Contoh di bawah ini menggunakan pemilih div > p:first-child { background-color: lightblue; }_1 dari CSS untuk memilih anak kedua dari div > p:first-child { background-color: lightblue; }3
Contoh Salinan
div > p:nth-of-type(2) { background-color: lightblue; }_
Cobalah Belajar Langsung di Udacity
Tip. dalam tanda kurung dari. nth-of-type, Anda menentukan anak mana yang ingin Anda pilih
tipe ke-n vs. . anak ke-n
Pemilih div > p:first-child { background-color: lightblue; }4 sangat mirip dengan div > p:first-child { background-color: lightblue; }5. Inilah perbedaan utamanya
- div > p:first-child { background-color: lightblue; }_4 memilih semua anak yang ditentukan (misalnya, kedua) terlepas dari jenis orang tua mereka
- div > p:first-child { background-color: lightblue; }_5 memilih anak-anak yang ditentukan dari orang tua tertentu
Pro
- Desain sederhana (tidak ada informasi yang tidak perlu)
- Kursus berkualitas tinggi (bahkan yang gratis)
- Berbagai fitur
- program nanogelar
- Cocok untuk perusahaan
- Sertifikat penyelesaian berbayar
EKSKLUSIF. DISKON 75%.
Pro
- Mudah dinavigasi
- Tidak ada masalah teknis
- Terlihat peduli dengan penggunanya
- Berbagai macam kursus
- Kebijakan pengembalian dana 30 hari
- Sertifikat kelulusan gratis
SERENDAH 12. 99$
Pro
- Pengalaman pengguna yang luar biasa
- Menawarkan konten berkualitas
- Sangat transparan dengan harga mereka
- Sertifikat kelulusan gratis
- Berfokus pada keterampilan ilmu data
- Jadwal belajar fleksibel
DISKON 75%.
Menemukan anak terakhir
Untuk menata anak terakhir dengan properti CSS, Anda harus memilihnya dengan pemilih div > p:first-child { background-color: lightblue; }8
Contoh berikut memilih anak terakhir dari elemen div > p:first-child { background-color: lightblue; }_3, yang akan diberi gaya dengan properti CSS background-color
Contoh Salinan
div > p:last-child { background-color: lightblue; }
Cobalah Belajar Langsung di Udacity
Catatan. pada awalnya, unsur-unsur yang. anak terakhir yang dipilih harus memiliki orang tua. Sekarang, Anda dapat memilih anak terakhir di antara saudara lainnya
Pemilih keturunan
Pemilih keturunan tidak memiliki kombinator. Sebagai gantinya, CSS memisahkan pemilih ini dengan spasi putih di antaranya
Pemilih keturunan menemukan semua keturunan dari elemen tertentu terlepas dari posisinya di pohon DOM
This example selects all descendants of
Contoh Salinan
div p { background-color: lightblue; }
Cobalah Belajar Langsung di Udacity
Pemilih Saudara Umum
Kombinator div > p:nth-of-type(2) { background-color: lightblue; }0 memisahkan dua pemilih dan memilih elemen kedua setelah elemen pertama, dan kedua pemilih memiliki induk yang sama
This example selects all
elements that are siblings of
Contoh Salinan
div ~ p { background-color: lightblue; }
Cobalah Belajar Langsung di Udacity
Pemilih saudara yang berdekatan
Kombinator div > p:nth-of-type(2) { background-color: lightblue; }1 memisahkan dua pemilih dan memilih elemen kedua ketika datang tepat setelah pemilih pertama, dan keduanya berbagi induk