Buat seleksimu lebih presisi! Pelajari cara menggunakan Descendant, Child, Adjacent Sibling, General Sibling, dan Grouping selector di CSS.
16m bacaanKuis WajibMicro Badge Lesson
Setelah belajar selector dasar, sekarang kita akan belajar cara membuat selector yang lebih spesifik dengan menggabungkan beberapa selector atau menargetkan hubungan antar elemen.
Gabungin Kekuatan Selector: Biar Target Makin Akurat!
Udah kenalan kan sama Type, Class, dan ID selector? Itu udah modal bagus banget! Tapi, kadang kita butuh milih elemen yang lebih spesifik lagi, misalnya "semua paragraf yang ada di dalem artikel" atau "item daftar yang jadi anak langsung dari unordered list tertentu".
Nah, CSS ngasih kita cara buat menggabungkan beberapa selector (ini disebut combinators) atau mengelompokkan beberapa selector biar bisa nulis style yang lebih efisien dan terarah. Yuk, kita pelajari beberapa jurus kombinasi dan grouping ini!
1. Grouping Selector (Mengelompokkan Selektor) - Satu Style Buat Rame-Rame
Seringkali, kita pengen ngasih beberapa style yang sama persis ke beberapa elemen yang beda. Daripada nulis aturan CSS yang sama berulang-ulang buat tiap selektor, kita bisa ngelompokkin selektor-selektor itu jadi satu.
Sintaks: Pisahkan masing-masing selektor dengan koma (,).
:
Di contoh kedua, semua , semua , dan semua elemen dengan class bakal punya warna teks dan font . Begitu juga , , dan bakal punya yang sama. Lebih ringkes kan?
Contoh
css
/* Tanpa grouping, jadi boros: */h1 { color: maroon; font-family: Georgia, serif;}h2 { color: maroon; font-family: Georgia, serif;}.judul-penting { color: maroon; font-family: Georgia, serif;}/* Dengan grouping, jadi lebih efisien: */h1, h2, .judul-penting { color: maroon; font-family: Georgia, serif;}p, li, blockquote { line-height: 1.7;}
<h1>
<h2>
judul-penting
maroon
Georgia
p
li
blockquote
line-height
2. Descendant Selector (Selektor Turunan) - Nargetin Anak Cucu Cicit
Descendant Selector (kadang disebut juga Contextual Selector) dipake buat milih elemen yang jadi turunan (anak, cucu, cicit, dst.) dari elemen lain. Gak peduli seberapa dalem tingkat turunannya.
Sintaks: Tulis dua selektor atau lebih yang dipisahkan dengan spasi.
Cara Baca: "Elemen Y yang ada di dalem Elemen X".
Contoh:
article p (Pilih semua elemen <p> yang ada di mana pun di dalam elemen <article>).
div .ikon-kecil (Pilih semua elemen dengan class ikon-kecil yang ada di mana pun di dalam elemen <div>).
#menu-utama ul li a (Pilih semua elemen <a> yang ada di dalam <li>, yang ada di dalam <ul>, yang ada di dalam elemen dengan ID menu-utama).
Contoh Penggunaan di CSS:
File HTML (index.html):
html
<article class="berita"> <h2>Judul Artikel</h2> <p>Ini paragraf pertama di dalam artikel.</p> <div> <p>Ini paragraf kedua, ada di dalam div di dalam artikel.</p> </div></article><div class="catatan"> <p>Ini paragraf di dalam div catatan, bukan di artikel.</p></div>
File CSS (style.css):
css
/* Semua <p> yang ada di dalam elemen dengan class "berita" akan berwarna biru */.berita p { color: blue;}/* Semua <p> yang ada di dalam elemen dengan class "catatan" akan berwarna hijau */.catatan p { color: green;}
Hasilnya, paragraf "Ini paragraf pertama..." dan "Ini paragraf kedua..." bakal jadi biru, sedangkan paragraf "Ini paragraf di dalam div catatan..." bakal jadi hijau.
3. Child Selector (Selektor Anak Langsung) - Cuma Nargetin Anak Kandung
Child Selector mirip sama descendant selector, tapi dia lebih spesifik. Dia cuma milih elemen yang jadi anak langsung (direct child) dari elemen lain. Jadi, cucu atau cicit gak bakal kena.
Sintaks: Tulis dua selektor yang dipisahkan dengan tanda lebih besar (>).
Cara Baca: "Elemen Y yang merupakan anak langsung dari Elemen X".
Contoh:
ul > li (Pilih semua elemen <li> yang jadi anak langsung dari <ul>. Kalau ada <ul> di dalem <li> lagi, <li> di dalem <ul> yang kedua itu gak bakal kena sama selektor ini).
article > p (Pilih semua elemen <p> yang jadi anak langsung dari <article>. Paragraf yang ada di dalem <div> di dalem <article> gak bakal kena).
Contoh Penggunaan di CSS:
File HTML (index.html):
html
<div class="kontainer-luar"> <p>Paragraf ini anak langsung dari .kontainer-luar.</p> <div class="kontainer-dalam"> <p>Paragraf ini anak langsung dari .kontainer-dalam (cucu dari .kontainer-luar).</p> </div> <ul> <li>Item ini anak langsung dari ul.</li> </ul></div>
File CSS (style.css):
css
/* Hanya <p> yang jadi anak langsung dari .kontainer-luar yang akan bergaris bawah */.kontainer-luar > p { text-decoration: underline;}/* Semua <p> yang ada di dalam .kontainer-luar (termasuk cucu) akan tebal */.kontainer-luar p { font-weight: bold; }
Hasilnya:
"Paragraf ini anak langsung dari .kontainer-luar." -> Akan bergaris bawah DAN tebal.
"Paragraf ini anak langsung dari .kontainer-dalam..." -> Akan tebal SAJA (karena dia bukan anak langsung .kontainer-luar untuk aturan garis bawah, tapi dia tetep turunan .kontainer-luar untuk aturan tebal).
"Item ini anak langsung dari ul." -> Gak kena dua style di atas.
Adjacent Sibling Selector dipake buat milih elemen yang jadi saudara kandung (punya parent yang sama) dan posisinya tepat setelah elemen lain. Kayak tetangga sebelah rumah persis.
Sintaks: Tulis dua selektor yang dipisahkan dengan tanda plus (+).
Cara Baca: "Elemen Y yang merupakan saudara kandung dan posisinya persis setelah Elemen X".
Contoh:
h2 + p (Pilih elemen <p> yang posisinya langsung setelah elemen <h2>, dan keduanya punya parent yang sama).
.ikon + span (Pilih elemen <span> yang posisinya langsung setelah elemen dengan class ikon, dan keduanya punya parent yang sama).
Contoh Penggunaan di CSS:
File HTML (index.html):
html
<div> <h2>Judul Bagian</h2> <p>Paragraf pertama setelah judul. Ini kena style.</p> <p>Paragraf kedua setelah judul. Ini TIDAK kena style.</p> <div> <p>Paragraf di dalam div lain. Ini TIDAK kena style.</p> </div> <h3>Sub Judul Lain</h3> <p>Paragraf setelah sub judul lain. Ini TIDAK kena style dari h2+p.</p></div>
File CSS (style.css):
css
/* Hanya paragraf (<p>) yang langsung mengikuti <h2> yang akan punya margin atas lebih besar */h2 + p { margin-top: 30px; color: darkred;}
Hasilnya, cuma "Paragraf pertama setelah judul." yang bakal punya margin-top: 30px; dan warna darkred. Paragraf lain gak kena.
5. General Sibling Selector (Selektor Saudara Umum) - Nargetin Semua Saudara Setelahnya
General Sibling Selector mirip sama adjacent sibling, tapi dia milih semua saudara kandung yang posisinya setelah elemen lain (gak harus persis sebelahnya).
Sintaks: Tulis dua selektor yang dipisahkan dengan tanda tilde (~).
Cara Baca: "Semua Elemen Y yang merupakan saudara kandung dan posisinya ada setelah Elemen X (gak harus langsung setelahnya)".
Contoh:
h2 ~ p (Pilih semua elemen <p> yang merupakan saudara dari <h2> dan muncul setelah <h2> tersebut, meskipun ada elemen lain di antaranya).
Contoh Penggunaan di CSS:
File HTML (index.html):
html
<div> <h2>Judul Bagian</h2> <p>Paragraf pertama setelah judul. Ini kena style.</p> <div>Elemen div pemisah</div> <p>Paragraf kedua setelah judul (tapi gak langsung). Ini juga kena style!</p> <h3>Sub Judul Lain</h3> <p>Paragraf setelah sub judul lain. Ini TIDAK kena style dari h2~p.</p></div>
File CSS (style.css):
css
/* Semua paragraf (<p>) yang merupakan saudara dan muncul setelah <h2> akan berwarna ungu */h2 ~ p { color: purple;}
Hasilnya, "Paragraf pertama setelah judul." DAN "Paragraf kedua setelah judul (tapi gak langsung)." bakal jadi warna ungu.
Dengan menguasai berbagai jenis kombinator dan grouping selector ini, kamu jadi punya senjata yang jauh lebih ampuh buat nargetin elemen HTML dengan presisi tinggi. Awalnya mungkin kerasa agak ribet, tapi coba deh praktikkan dengan contoh-contoh HTML-mu sendiri, pasti lama-lama bakal terbiasa dan ngerti banget kapan harus pake yang mana.
Ini bakal ngebantu banget buat bikin kode CSS-mu jadi lebih efisien, terhindar dari penggunaan !important yang gak perlu, dan pastinya lebih gampang di-maintain!
Checkpoint KuisTarget: 70%
Kuis Selector Kombinasi & Grup CSS
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
