CSS Combinators

CSS Combinators

CSS Combinators

Selector pada CSS dapat terdiri dari gabungan lebih dari satu selector sederhana. Kombinasi selector ini biasa disebut dengan istilah Combinators.

Ada empat kombinasi berbeda untuk selector dengan menggunakan CSS:

  • Selector turunan / descendant selector (space)
  • Selector anak / child selector (>)
  • Selector saudara yang berdekatan  / adjacent sibling selector (+)
  • Selector saudara umum / general sibling selector (~)

Selector Turunan / Descendant Selector (space)

Selector turunan akan mencari semua elemen yang merupakan keturunan dari elemen tertentu.

Contoh berikut memilih semua elemen <p> di dalam elemen <div> :

Contoh

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

<h2>Selector Descendant</h2>

<p>Selector turunan akan mencari semua elemen yang merupakan keturunan dari elemen tertentu.</p>

<div>
<p>Paragraf 1 di div.</p>
<p>Paragraf 2 di div.</p>
<section><p>Paragraf 3 di div.</p></section>
</div>

<p>Paragraf 4. Tidak dalam div.</p>
<p>Paragraf 5. Tidak dalam div.</p>

</body></html>

Jalankan Contoh

Selector Anak / Child Selector (>)

Selector anak akan mencari semua elemen yang merupakan anak dari elemen tertentu. Semua anak dari suatu elemen merupakan keturunan dari elemen tersebut, tapi tidak semua keturunan merupakan anak.

Contoh berikut memilih semua elemen <p> yang merupakan anak dari elemen <div> :

Contoh

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

<h2>Selector Child</h2>

<p>Selector anak akan mencari semua elemen yang merupakan anak dari elemen tertentu.</p>

<div>
<p>Paragraf 1 di div.</p>
<p>Paragraf 2 di div.</p>
<bagian>
<!-- bukan Anak tapi Keturunan -->
<p>Paragraf 3 di div (di dalam elemen bagian).</p>
</bagian>
<p>Paragraf 4 di div.</p>
</div>

<p>Paragraf 5. Tidak dalam div.</p>
<p>Paragraf 6. Tidak dalam div.</p>

</body></html>

Jalankan Contoh

Selector Saudara Berdekatan / Adjacent Sibling Selector (+)

Selector saudara (sibling) yang berdekatan digunakan untuk memilih elemen yang tepat berada di sebelah elemen tertentu lainnya. Jadi hanya ada satu elemen yang akan dipilih.

Elemen saudara (sibling) harus memiliki elemen induk yang sama.

Contoh berikut memilih elemen <p> yang ditempatkan tepat setelah elemen <div> :

Contoh

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

<h2>Selector Sibling</h2>

<p>Selector saudara (sibling) yang berdekatan digunakan untuk memilih elemen yang tepat berada di sebelah elemen tertentu lainnya.</p>
<p>Contoh berikut memilih elemen p pertama yang ditempatkan tepat setelah elemen div:</p>

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

<p>Paragraf 3. Setelah div.</p>
<p>Paragraf 4. Setelah div.</p>

<div>
<p>Paragraf 5 di div.</p>
<p>Paragraf 6 di div.</p>
</div>

<p>Paragraf 7. Setelah div.</p>
<p>Paragraf 8. Setelah div.</p>

</body></html>

Jalankan Contoh

Selector Saudara Umum / General Sibling Selector (~)

Selector saudara (general sibling) secara umum memilih semua elemen yang berada di sebelah elemen tertentu lainnya.

Contoh berikut memilih semua elemen <p> yang berada di sebelah elemen <div> :

Contoh

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

<h2>Selector General Sibling</h2>

<p>Selector saudara umum (general sibling) memilih semua elemen yang berada di sebelah elemen tertentu lainnya.</p>

<p>Paragraf 1.</p>

<div>
<p>Paragraf 2.</p>
</div>

<p>Paragraf 3.</p>
<code>Beberapa kode.</code>
<p>Paragraf 4.</p>

</body></html>

Jalankan Contoh

Contoh Lainnya

    Contoh

    Pilih setiap elemen <p> yang ada di dalam elemen <div> :

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

<h1>Demo selector</h1>

<div>
<h2>Nama saya Donald</h2>
<p>Saya tinggal di Duckburg.</p>
</div>

<p>Sahabatku adalah Miki.</p>

</body></html>

    Jalankan Contoh

    Contoh

    Pilih setiap elemen <p> yang induknya adalah elemen <div> :

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

<h1>Demo selector</h1>

<div>
<h2>Nama saya Donald</h2>
<p>Saya tinggal di Duckburg.</p>
</div>

<div>
<span><p>Saya tidak akan ditata.</p></span>
</div>

<p>Sahabatku adalah Miki.</p>

</body></html>

    Jalankan Contoh

    Contoh

    Pilih elemen <p> yang ditempatkan tepat setelah elemen <div> :

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

<h1>Demo selector</h1>

<div>
<h2>Nama saya Donald</h2>
<p>Saya tinggal di Duckburg.</p>
</div>

<p>Sahabatku adalah Miki.</p>

<p>Saya tidak akan bergaya.</p>

</body></html>

    Jalankan Contoh

    Contoh

    Tetapkan warna latar untuk semua elemen <ul> yang berada setelah elemen <p> dengan induk yang sama:

    <!DOCTYPE html>
<html>
<head>
<style> 
p ~ ul {
  background: #ff0000;
}
</style>
</head>
<body>

<div>Elemen div.</div>
<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ul>

<p>Paragraf pertama.</p>
<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ul>

<h2>Daftar lainnya</h2>
<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ul>

</body></html>

    Jalankan Contoh

    Tutorial sebelumnya : Perataan Horizontal Dan Vertikal Dengan CSS
    Tutorial setelahnya : CSS Pseudo-Class
    Semua Tutorial CSS : Tutorial CSS

    Tinggalkan Balasan