Pelajari berbagai jenis penggabungan selector di CSS seperti descendant, child, adjacent sibling, dan general sibling.

CSS Combinators

CSS combinators digunakan untuk menargetkan elemen berdasarkan hubungan mereka dengan elemen lain. Ada empat jenis utama:

1. Descendant Selector (`A B`)

Menargetkan elemen B yang berada di dalam A (bisa bersarang lebih dari satu level).

<style>
  div p {
    color: blue;
  }
</style>
 
<div>
  <p>Ini akan berwarna biru</p>
  <section>
    <p>Ini juga akan berwarna biru</p>
  </section>
</div>

2. Child Selector (`A > B`)

Menargetkan B yang merupakan anak langsung dari A.

<style>
  div > p {
    color: red;
  }
</style>
 
<div>
  <p>Ini akan merah</p>
  <section>
    <p>Ini tidak akan terpengaruh</p>
  </section>
</div>

3. Adjacent Sibling Selector (`A + B`)

Menargetkan elemen B yang langsung mengikuti A.

<style>
  h1 + p {
    color: green;
  }
</style>
 
<h1>Judul</h1>
<p>Ini akan hijau</p>
<p>Ini tidak akan hijau</p>

4. General Sibling Selector (`A ~ B`)

Menargetkan semua elemen B yang merupakan saudara dari A, bukan hanya yang langsung setelahnya.

<style>
  h1 ~ p {
    color: purple;
  }
</style>
 
<h1>Judul</h1>
<p>Paragraf 1</p>
<p>Paragraf 2</p>

Ringkasan CSS Combinators

Combinator	Contoh	Arti
(spasi)	`A B`	Semua elemen `B` di dalam `A`
`>`	`A > B`	Hanya anak langsung `B` dari `A`
`+`	`A + B`	`B` yang langsung mengikuti `A` (satu tingkat)
`~`	`A ~ B`	Semua `B` yang merupakan saudara dari `A`

CSS Combinators

CSS Combinators

1. Descendant Selector (A B)

2. Child Selector (A > B)

3. Adjacent Sibling Selector (A + B)

4. General Sibling Selector (A ~ B)

Ringkasan CSS Combinators

On this page

1. Descendant Selector (`A B`)

2. Child Selector (`A > B`)

3. Adjacent Sibling Selector (`A + B`)

4. General Sibling Selector (`A ~ B`)