← CSS46 / 62

:has() — selector induk yang lama ditunggu

Selama bertahun-tahun CSS tidak bisa memilih elemen berdasarkan isinya. :has() mengubah itu: .kartu:has(img) berarti 'kartu yang di dalamnya ada gambar'. Ini membuka pola yang sebelumnya butuh JavaScript, misalnya memberi gaya berbeda pada form yang punya input invalid.

👀 Contoh dulu

/* form yang MENGANDUNG input invalid */
form:has(input:invalid) {
  border: 2px solid red;
}

/* label yang punya checkbox tercentang */
label:has(input:checked) {
  font-weight: bold;
}

Hasilnya: Form otomatis bergaris merah begitu ada satu input yang tidak valid — tanpa JavaScript sama sekali.

💡 Yang diberi gaya adalah elemen di LUAR (form/label), berdasarkan kondisi isi di dalamnya.

📝 Sekarang giliranmu

Beri border: 3px solid #16a34a pada kartu yang memiliki gambar di dalamnya, memakai .kartu:has(img).

Preview
← SebelumnyaBerikutnya →