Selector Lanjutan & Kombinator

Memilih berdasarkan hubungan antar elemen: keturunan, anak langsung, saudara berikutnya, dan selector atribut.

Part 3 dari 25 ± 40 menit Gratis

Memilih berdasarkan hubungan

Struktur HTML itu seperti pohon keluarga: ada induk (parent), anak (child), cucu, dan saudara (sibling). Kombinator CSS memungkinkan kita memilih elemen berdasarkan posisinya dalam pohon itu.

Kombinator	Tulisan	Memilih
Keturunan	`A B` (spasi)	Semua `B` di dalam `A`, sedalam apa pun
Anak langsung	`A > B`	`B` yang langsung menjadi anak `A`
Saudara berikutnya	`A + B`	`B` yang tepat setelah `A`
Semua saudara berikutnya	`A ~ B`	Semua `B` setelah `A` dengan induk sama

Contoh

<nav>
  <ul>
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Tentang</a></li>
  </ul>
</nav>

nav a      { color: white; }        /* semua a di dalam nav */
nav > ul   { margin: 0; }           /* ul yang langsung anak nav */
li + li    { margin-top: 8px; }     /* li yang tepat setelah li lain */

Selector keturunan sangat sering dipakai: .kartu p berarti "paragraf yang berada di dalam kartu", sehingga paragraf di tempat lain tidak terpengaruh.

Selector atribut

Memilih elemen berdasarkan atribut HTML-nya:

Tulisan	Memilih
`a[target]`	Tautan yang punya atribut `target`
`input[type="email"]`	Input dengan type persis email
`a[href^="https"]`	href yang diawali https
`a[href$=".pdf"]`	href yang diakhiri .pdf
`a[href*="kelasit"]`	href yang memuat kelasit

Tips

Jangan membuat rantai selector terlalu panjang (div ul li a span); sulit dirawat dan mudah rusak.
Kombinasikan: .menu > li memilih item menu tingkat pertama saja, bukan submenu.