Apa Itu CSS Combinator

 ⊛ • 6 mins read

Main Image

Halo semuanya, apa kabar? Mudah-mudahan selalu diberikan kesehatan ya. Pada kali ini saya akan menjelaskan mengenai Apa Itu CSS Combinator.

Jadi apa itu combinator? Dinamakan combinator karena selector ini mengombinasikan (combine) selector lainnya dan menghasilkan hubungan yang berguna satu dengan lainnya.

Terdapat empat jenis combinator dalam CSS yaitu:

  1. Descendant combinator (spasi)
  2. Child combinator (>)
  3. Adjacent sibling combinator (+)
  4. General sibling combinator (~)

1. Descendant Combinator

Descendant combinator yang direpresentasikan sebagai sebuah spasi () digunakan untuk mengombinasikan dua selector sehingga seluruh selector kedua akan masuk dalam selector pertama. Simak contoh berikut sebagai gambarannya.

Contoh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
  <style>
    span p {
      color: white;
      background-color: blue;
    }
    div section p {
      color: white;
      background-color: red;
    }
  </style>
</head>
<body>
<div>
  <p>Paragraf 1 di dalam div.</p>
  <span>
    <p>Paragraf 2 di dalam div dan span.</p>
    <div>
      <p>Paragraf 3 di dalam div, span, dan div lagi.</p>
      <section>
      	<p>Paragraf 4 di dalam div, span, div lagi, dan section.</p>
      </section>
    </div>
  </span>
</div>
</body>
</html>

Output

img

Penjelasan

Dalam contoh di atas, tag <p> yang berada dalam tag <span> (Paragraf 2 dan 3) akan terseleksi sehingga memiliki warna teks putih dan background biru, lalu tag <p> dalam tag <section> dalam tag div (Paragraf 4) akan terseleksi sehingga memiliki warna teks putih dan background merah.

2. Child Combinator

Child combinator yang direpresentasikan dengan tanda lebih dari (>) terletak di antara dua CSS selector. Dalam hal ini parent selector akan hanya berefek pada child selector yang berada di dalamnya, seperti contoh berikut.

Contoh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
  <style>
    div > p {
      color: white;
      background-color: blue;
    }
  </style>
</head>
<body>
<div>
  <p>Paragraf 1 di dalam div.</p>
  <span>
    <p>Paragraf 2 di dalam div dan span.</p>
  </span>
  <p>Paragraf 3 di dalam div.</p>
</div>
</body>
</html>

Output

img

Penjelasan

Dalam contoh di atas, tag <p> yang memiliki parent <div> secara langsung akan terseleksi seperti paragraf 1 dan 3, selain itu tidak akan terseleksi seperti paragraf 2.

3. Adjacent Sibling Combinator

Adjacent sibling combinator yang direpresentaikan oleh tanda plus (+) digunakan untuk memilih satu selector secara langsung setelah parent selector, simak contoh berikut.

Contoh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
  <style>
    h1 + p {
      color: white;
      background-color: blue;
    }
  </style>
</head>
<body>
  <h1>Judul</h1>
  <p>Paragraf 1</p>
  <p>Paragraf 2</p>
</body>
</html>

Output

img

Penjelasan

Dalam contoh di atas, tag <p> setelah tag <h1> secara langsung akan terseleksi seperti paragraf 1, selain itu tidak terseleksi seperti paragraf 2.

4. General Sibling Combinator

General sibling selector yang direpresentasikan oleh tanda gelombang (~) digunakan untuk menyeleksi semua elemen secara langsung setelah parent selector. Simak contoh berikut.

Contoh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
  <style>
    h1 ~ p {
      color: white;
      background-color: blue;
    }
  </style>
</head>
<body>
  <h1>Judul</h1>
  <p>Paragraf 1</p>
  <span>Paragraf 2</span>
  <p>Paragraf 3</p>
</body>
</html>

Output

img

Penjelasan

Dalam contoh di atas, semua tag <p> secara langsung setelah tag <h1> akan terseleksi seperti paragraf 1 dan 3, selain itu tidak akan terseleksi seperti paragraf 2.

Sekian penjelasan yang saya berikan, semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Share this post:


Tags
CSS
Other Articles Perbedaan Antara Div dan Span Tag Tipe-tipe 'Switch' Dalam Java