Memahami Penggunaan Combinator pada CSS Selector

Oleh Unknown

Wednesday, May 18, 2016

Menggunakan Combinator pada CSS Selector - Kali ini sinahu coding akan membahas tentang CSS Combinator. Sebelum masuk pembahasan, kamu harus memahami CSS selector terlebih dahulu. Karena CSS combinator adalah instrumen yang akan kita gunakan untuk menentukan hubungan antara beberapa selector. Berikut ini ada beberapa postingan sebelumnya yang bisa kamu jadikan rujukan untuk mengikuti pembahasan CSS combinator.

4 Jenis Combinator dalam CSS

Ada 4 jenis combinator yang bisa digunakan untuk mengatur CSS selector. Yaitu ;

descendant selector (dengan spasi)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

Pastikan untuk mengingat tanda yang membedakan antara keempat combination tersebut. Karena itu yang terpenting saat penulisan coding.

1. Descendant Selector

Combinator yang berfungsi untuk mencocokkannya dengan seluruh elemen turunan tertentu. Lebih jelasnya, berikut ini adalah contoh penggunaan Descendant selector untuk menyeleksi seluruh elemen <p> yang berada di dalam elemen <div> dengan warna merah.


<!DOCTYPE html>
<html>
<head>
<style>
div p {
    background-color: red;
}
</style>
</head>
<body>

<div>
  <p>Paragraf 1 yang berada di div.</p>
  <p>Paragraf 2 yang berada di div.</p>
  <span><p>Paragraf 3 yang berada di div.</p></span>
</div>

<p>Paragraf 4 yang tidak berada di div.</p>
<p>Paragraf 5 yang tidak berada di div.</p>

</body>
</html>

Maka hasilnya :

Sebagaimana terlihat, paragraf 1,2, dan 3 menjadi berwarna merah. Karena ketiganya adalah elemen <p> yang berada di dalam elemen <div>. sedangkan paragraf 4 dan 5 tidak berubah, karena berada di luar elemen <div>.

Pada contoh tersebut, penulisan coding descendant selector adalah div p

2. Child Selector

Combinator yang berfungsi untuk mencocokkannya dengan anak-anak langsung dari elemen tertentu, istilahnya disebut immediate children. Lebih jelasnya, berikut ini adalah contoh penggunaan Child selector untuk menyeleksi seluruh elemen <p> yang merupakan anak-anak langsung dari elemen <div> dengan warna merah.


<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: red;
}
</style>
</head>
<body>

<div>
  <p>Paragraf 1 yang berada di div.</p>
  <p>Paragraf 2 yang berada di div.</p>
  <span><p>Paragraf 3 yang berada di div.</p></span> <!-- ini bukan Child tapi Descendant -->
</div>

<p>Paragraf 4 yang tidak berada di div.</p>
<p>Paragraf 5 yang tidak berada di div.</p>

</body>
</html>

Maka hasilnya :

Sebagaimana terlihat, paragraf 1 dan 2 menjadi berwarna merah. Karena keduaya adalah elemen <p> yang menjadi anak langsung dari elemen <div>. Paragraf 3 tidak berubah, karena meskipun berada di dalam <div> tapi bukan anak langsung elemen <div>, karena dipisahkan oleh <span>. Sedangkan paragraf 4 dan 5 sudah jelas tidak berubah, karena berada di luar elemen <div>.

Pada contoh tersebut, penulisan coding child selector adalah div > p

3. Adjacent Sibling Selector

Combinator yang berfungsi untuk mencocokkannya dengan elemen tertentu yang berdekatan atau berada langsung di bawahnya. Lebih jelasnya, berikut ini adalah contoh penggunaan Adjacent Sibling Selector untuk menyeleksi elemen <p> yang berada langsung setelah elemen <div> dengan warna merah.


<!DOCTYPE html>
<html>
<head>
<style>
div + p {
    background-color: red;
}
</style>
</head>
<body>

<div>
  <p>Paragraf 1 yang berada di div.</p>
  <p>Paragraf 2 yang berada di div.</p>
</div>

<p>Paragraf 3 yang tidak berada di div.</p>
<p>Paragraf 4 yang tidak berada di div.</p>

</body>
</html>

Maka hasilnya :

Yang berubah hanya paragraf 3. Karena paragraf tersebut terletak atau berdekatan secara langsung setelah elemen <div>. Sedangkan paragraf 4 tidak.

Pada contoh tersebut, penulisan coding Adjacent Sibling Selector adalah div + p

4. General Sibling Selector

Combinator yang berfungsi untuk mencocokkannya dengan semua elemen tertentu yang berada di bawahnya. Lebih jelasnya, berikut ini adalah contoh penggunaan General Sibling Selector untuk menyeleksi seluruh elemen <p> yang berada di bawah elemen <div> dengan warna merah.


<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
    background-color: red;
}
</style>
</head>
<body>

<div>
  <p>Paragraf 1 yang berada di div.</p>
  <p>Paragraf 2 yang berada di div.</p>
</div>

<p>Paragraf 3 yang tidak berada di div.</p>
<p>Paragraf 4 yang tidak berada di div.</p>

</body>
</html>

Maka hasilnya :

Yang berubah adalah paragraf 3 dan 4. Karena kedua paragraf tersebut terletak setelah elemen <div>.

Pada contoh tersebut, penulisan coding General Sibling Selector adalah div ~ p

Itulah 4 penggunaan CSS combination beserta perbedaannya masing-masing. Perbedaannya hanya terletak pada perbedaan penulisan tanda di script kodenya. Semoga bermanfaat.