Selektor Lanjutan: Kombinator dan Atribut

Kenapa selektor dasar kadang kurang?

Bayangkan kamu mau men-style link yang ada di dalam navbar saja, bukan semua link di halaman. Selektor class bisa, tapi kadang struktur HTML-nya sudah jelas dan kamu tidak mau menambah class baru. Di sinilah kombinator berperan: simbol yang menjelaskan hubungan antar elemen.

Kombinator keturunan (spasi)

nav a {
  color: white;
}

Targetnya: semua <a> yang berada di dalam <nav>, sedalam apa pun. Ini kombinator yang paling sering dipakai.

Kombinator child (>)

ul > li {
  list-style: none;
}

Targetnya: <li> yang merupakan anak langsung dari <ul>. Kalau ada <li> bersarang di dalam <li> lain, yang bersarang itu tidak kena. Lebih ketat dari keturunan.

Kombinator sibling

Ada dua jenis. Adjacent sibling + menargetkan saudara yang tepat setelahnya:

h2 + p {
  margin-top: 0;
}

Paragraf yang langsung muncul setelah h2 tidak punya margin atas. Berguna buat mengatur ritme teks artikel.

General sibling ~ menargetkan semua saudara setelahnya:

h2 ~ p {
  color: #444;
}

Semua paragraf setelah h2 (dalam induk yang sama) kena, tidak harus langsung menempel.

Selektor atribut

Menargetkan elemen berdasarkan atributnya, tanpa perlu class.

/* semua input yang tipenya text */
input[type="text"] {
  border: 1px solid #ccc;
}

/* semua link yang href-nya diawali https */
a[href^="https"] {
  color: green;
}

/* semua gambar yang src-nya diakhiri .svg */
img[src$=".svg"] {
  width: 24px;
}

Operator yang berguna: = (persis sama), ^= (diawali), $= (diakhiri), *= (mengandung).

Contoh gabungan dunia nyata

/* tombol di dalam form login saja */
form.login button[type="submit"] {
  background: royalblue;
  color: white;
}

Tiga selektor digabung: elemen form dengan class login, lalu keturunannya button yang atribut type-nya submit. Presisi tanpa menambah class di HTML.

Catatan teknis: jangan berlebihan memakai kombinator yang terlalu panjang seperti div > div > div > p. Itu rapuh: sedikit perubahan struktur HTML langsung merusak style. Kalau rantainya lebih dari 3 level, lebih baik tambahkan class di HTML.

Rangkuman

Kombinator menjelaskan hubungan: spasi (keturunan), > (anak langsung), + (saudara tepat setelah), ~ (semua saudara setelah). Selektor atribut menargetkan lewat atribut seperti type dan href. Pakai secukupnya, jangan bikin rantai selektor sepanjang kereta.