Daftar Isi:
Video: CSS Efecto - 03 PseudoClases @JoseCodFacilito 2024
Saat menata elemen tertentu dengan CSS, akan sangat membantu untuk memvisualisasikan kode HTML sebagai pohon keluarga dengan orang tua, anak-anak, dan saudara kandung. Dalam contoh kode berikut, pohon dimulai dengan elemen
html
, yang memiliki dua anak
kepala
dan
tubuh
. Kepala
memiliki elemen anak yang disebut
judul
. Unsur
tubuh
memiliki
h1
,
ul
, dan
p
sebagai anak-anak. Akhirnya, elemen
ul
memiliki elemen
li
sebagai anak-anak, dan elemen
p
memiliki elemen
a
sebagai anak-anak.
Gambar 4-3: DOM
Bosan Elon Musk
Vinod Coleslaw
ebook kuda
Modern Seinfeld
Lord_Voldemort7
Beginilah kode tersebut muncul di browser .
Versi ini menunjukkan penggambaran kode menggunakan metafora pohon.
Di sini, setiap hubungan ditampilkan satu kali. Misalnya, dalam kode, elemen
a
ada di dalam masing-masing elemen
li
, dan gambar ini menunjukkan
ul
li
a
hubungan satu kali
Boron Elon Musk adalah parodi Elon Musk, pendiri PayPal, Tesla, dan SpaceX. Vinod Coleslaw adalah parodi Vinod Khosla, pendiri dan pendiri Sun Microsystems. Kuda ebooks adalah spambot yang menjadi fenomena internet.
Pohon HTML disebut model objek DOM atau dokumen.
Selektor anak
Tag suara anchor parodi Non-Tech adalah anak-anak langsung dari tag paragraf. Jika Anda ingin hanya menggunakan akun Twitter Parodi Non-Tech, Anda dapat menggunakan pemilih anak, yang memilih anak-anak langsung dari elemen tertentu. Seorang pemilih anak dibuat dengan daftar pertama pemilih induk, lalu tanda lebih besar dari (>), dan akhirnya pemilih anak.
Dalam contoh berikut, tag jangkar yang merupakan anak-anak langsung dari tag paragraf dipilih, dan hyperlink tersebut ditata dengan warna font merah dan tanpa garis bawaan. Akun Twitter Parody Tech tidak ditata karena mereka adalah anak langsung dari daftar item. Warna
p> a {
: merah;
hiasan teks: tidak ada;
}
Jika Anda menggunakan pemilih
a
di sini, semua tautan pada halaman akan ditata dan bukan hanya pilihan.
Selektor Keturunan
Tag suara ankor Twitter Parodi Tech adalah keturunan, atau berada di dalam, daftar tidak berurutan. Jika Anda ingin hanya menggunakan akun Twitter Parodi Tech, Anda dapat menggunakan pemilih, yang memilih bukan hanya anak-anak yang langsung dari elemen tertentu namun semua elemen bersarang di dalam elemen yang ditentukan. Seleksi keturunan dibuat dengan daftar pertama pemilih induk, spasi, dan akhirnya pemilih yang ingin Anda targetkan.
Dalam contoh berikut, tag anchor yang merupakan keturunan dari daftar tak berurutan dipilih, dan hyperlink tersebut ditata dengan warna font biru dan dicoret. Akun Twitter Non-Twitter Parodi tidak ditata karena mereka bukan keturunan dari daftar yang tidak berurutan.
ul a {
warna: biru;
hiasan teks: line-through;
}
Tertarik dengan styling hanya tag anchor pertama dalam daftar, seperti akun Twitter Modern Seinfeld, atau item daftar kedua, seperti akun Twitter Vinod Coleslaw? Pergi ke w3schools. com dan baca lebih lanjut tentang pemilih
anak pertama
, dan
nth-anak
.
