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.

 

Leave a Reply

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