Halo, pada kesempatan kali ini saya akan membahas mengenai jenis-jenis combinator yang ada pada CSS. Apa fungsinya dan bagaimana contoh penggunannya? Simaklah bahasan berikut.
Section Artikel
Combinator pada CSS
Combinator adalah sesuatu yang menjelaskan hubungan antar selector.
Selector pada CSS dapat berisi lebih dari satu selector sederhana. Nah diantara lebih dari satu selector, kita dapat menyertakan combinator.
Berikut adalah empat jenis combinator yang berbeda pada CSS:
- descendant selector (spasi)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Descendat Selector
Descendant selector bekerja dengan mencocokkan semua elemen yang merupakan turunan dari elemen tertentu.
Contoh penggunaan descendant selector, yaitu memilih semua elemen di dalam elemen:
Contoh:
<!DOCTYPE html> <html> <head> <style> div p { background-color: yellow; } </style> </head> <body> <div> <p>Paragraf 1 dalam div.</p> <p>Paragraf 2 dalam div.</p> <section><p>Paragraf 3 dalam div.</p></section> </div> <p>Paragraf 4. bukan dalam div.</p> <p>Paragraph 5. bukan dalam div.</p> </body> </html>
Child Selector
Child selector bekerja dengan memilih semua elemen yang merupakan turunan dari elemen tertentu.
Contoh berikut penggunaan child selector, yaitu memilih semua elemen <p> yang merupakan turunan dari elemen <div> :
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraf 1 dalam div.</p>
<p>Paragraf 2 dalam div.</p>
<section><p>Paragraf 3 dalam div.</p></section> <!-- bukan child tapi descendant -->
<p>Paragraph 4 dalam div.</p>
</div>
<p>Paragraf 5. bukan dalam div.</p>
<p>Paragraf 6. bukan dalam div.</p>
</body>
</html>Adjacent Sibling Selector
Adjacent Sibling Selector memilih semua elemen yang merupakan saudara kandung atau setingkat dan berdekatan dari elemen yang ditentukan.
Elemen saudara (sibling) harus memiliki elemen induk (parent) yang sama dan berdekatan.
Contoh berikut memilih semua elemen <p> yang ditempatkan tepat setelah elemen <div> :
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraf 1 dalam div.</p>
<p>Paragraf 2 dalam div.</p>
</div>
<p>Paragraf 3. bukan didalam div.</p>
<p>Paragraph 4. bukan didalam div.</p>
</body>
</html>
General Sibling Selector
General sibling selector memilih semua elemen yang merupakan saudara dari elemen yang ditentukan.
Contoh berikut menunjukan penggunaan general sibling selector untuk memilih semua <p> elemen yang merupakan saudara dari elemen <div>:
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<p>Paragraf 1.</p>
<div>
<p>Paragraf 2.</p>
</div>
<p>Paragraf 3.</p>
<code>Kode program.</code>
<p>Paragraf 4.</p>
</body>
</html>
Semua Combinator Selectors pada CSS
| Selector | Contoh | Contoh Deskripsi |
| element element | div p | Memilih semua elemen <p> didalam elemen inside <div> |
| element>element | div > p | Memilih semua elemen <p> dimana parent selectornya adalah elemen <div> |
| element+element | div + p | Memilih semua elemen <p> yang ditempatkan setelah elemen <div> |
| element1~element2 | p ~ ul | Memilih semua elemen <ul> yang diawali dengan elemen <p> |
Sekian penjelasan dari cara penggunaan dan contoh combinators selector, semoga bermanfaat.
