Cara Menggunakan Konsep Combinator pada CSS Part-1

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.

Combinator turunan

Combinator keturunan menargetkan setiap elemen yang bersarang di dalam elemen lain. Sarang bisa sedalam mungkin sedalam mungkin, yaitu anak, cucu dan seterusnya. Combinator turunan akan cocok dengan setiap instance elemen di bawah leluhurnya, dan dapat dirantai untuk meningkatkan spesifisitas. Setiap pemilih dalam rantai dipisahkan oleh spasi tunggal.

Katakanlah Anda memiliki beberapa HTML yang terlihat seperti ini:

<article>
  <h2>Lollipop muffin sweet cake</h2>
  <p>Chocolate cookie tootsie roll tiramisu tart lemon drops chocolate cake cheesecake biscuit.</p>

  <aside>
    <h2>Tiramisu sweet roll ice cream</h2>
    <p>Cake jelly-o jelly-o sweet roll powder muffin marshmallow dragée.</p>
  </aside>

  <p>Cake chocolate cake brownie brownie marshmallow biscuit. Chocolate bar chocolate cake sugar plum.</p>
</article>

 

Penyeleksi Keturunan akan cocok dengan instance pemilih terlepas dari mana itu bersarang di dalam pohon dokumen. Jika kita menerapkan gaya ke artikel h2, maka kedua pos, termasuk yang ada di elemen samping akan cocok.

Browser membaca penyeleksi dari kanan ke kiri, dan kami tidak ingin menyeleksi terlalu tinggi penyeleksi. Tidak perlu menulis penyeleksi seperti menyisihkan artikel tubuh html h2, karena aman untuk mengasumsikan elemen artikel akan berada di dalam tubuh yang pasti akan ada dalam html. Juga, jika Anda harus membuat rantai lebih dari 2 penyeleksi, Anda mungkin ingin mempertimbangkan hanya menerapkan kelas saja.

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 *