Cara Menggunakan Konsep Combinator pada CSS Part-2

Selektor dapat berisi beberapa penyeleksi sederhana, tetapi di antara setiap pemilih sederhana, harus ada kombinator. Ada beberapa kombinator yang dapat kita gunakan dan masing-masing menggambarkan hubungan antara pemilih.

Combinators anak (>)

Combinator anak menargetkan turunan langsung elemen induk dan menggunakan tanda lebih besar dari (>) sebagai pemisah antara elemen. Elemen induk harus selalu di sebelah kiri “>”. Hanya elemen anak langsung di pohon dokumen yang akan dicocokkan.

Dengan mengacu pada HTML yang sama yang digunakan dalam contoh pemilih keturunan, katakanlah kita memiliki gaya berikut:

article > h2 {
  background-image: linear-gradient(to right, #4776E6, #8E54E9);
  color: transparent;
  -webkit-background-clip: text;
}

 

Hanya h2 pertama yang akan ditargetkan karena ada elemen samping antara artikel dan elemen h2 kedua di pohon dokumen.

 

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *