cssselektoratributPemula4 mnt baca

Selektor Atribut

Targetkan elemen dari atributnya: [type], [href^=], [class*=], dan pola pencocokan lainnya.

Menyeleksi berdasarkan atribut

Kadang informasi yang kamu butuhkan sudah ada di atribut HTML, jadi tidak perlu menambah class:

css

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

/* semua elemen yang punya atribut title */
[title] {
  cursor: help;
}

Pencocokan sebagian

Pola	Arti	Contoh
`[href="x"]`	sama persis	link pasti
`[href^="https"]`	diawali	link eksternal
`[href$=".pdf"]`	diakhiri	file PDF
`[class*="btn-"]`	mengandung	semua varian tombol

Contoh favorit banyak developer: menandai link eksternal otomatis.

css

a[href^="http"]::after {
  content: " /";
  font-size: 0.8em;
}

Semua link yang href-nya diawali "http" otomatis dapat penanda, tanpa class tambahan. (Versi aslinya memakai panah, tapi kita hindari emoji di sini.)

Catatan teknis: pencocokan atribut bersifat case-sensitive untuk sebagian nilai. [type="Text"] tidak akan cocok dengan type="text". Tambahkan flag i untuk case-insensitive: [type="text" i].

Kenapa atribut, bukan class?

HTML sudah menyimpan banyak informasi: type pada input, href pada link, disabled pada tombol, data-* custom. Menambah class hanya untuk mengulang informasi itu adalah duplikasi. Selektor atribut membaca data yang sudah ada.

Contoh KENAPA yang kuat: kamu punya 50 link eksternal di artikel. Menambah class="eksternal" satu per satu melelahkan dan mudah lupa. a[href^="http"] menandai semuanya otomatis, termasuk link yang ditambahkan bulan depan.

Contoh bertahap: styling form

Level 1, bedakan jenis input tanpa class:

css

input[type="text"],
input[type="email"] {
  border: 1px solid #cbd5e1;
  padding: 10px 14px;
  border-radius: 8px;
}

input[type="submit"] {
  background: #38bdf8;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
}

Level 2, state dari atribut boolean:

css

/* tombol disabled: pudar dan tidak bisa diklik */
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* input wajib isi: labelnya tebal (pakai :has yang modern) */
label:has(input[required]) {
  font-weight: bold;
}

Kesalahan umum pemula

Salah: lupa tanda kutip pada nilai.

css

/* SALAH */
input[type=text] { }

/* BENAR (kutip disarankan, wajib bila ada karakter khusus) */
input[type="text"] { }

Salah: case-sensitive. [type="Text"] tidak cocok dengan type="text". HTML umumnya lowercase; samakan.

Salah: memakai *= terlalu longgar.

css

/* Berbahaya: [class*="btn"] juga kena .btnx, .mybtn2 */
[class*="btn"] { }

/* Lebih aman: target pola yang jelas */
[class*="btn-"] { }

*= mencocokkan substring di mana saja. Pastikan polanya cukup unik agar tidak kena class yang tidak diinginkan.

Latihan kilat

Tulis selektor untuk: (a) semua input bertipe password, (b) semua link ke file PDF, (c) semua elemen dengan atribut data-aktif.
Buat aturan: link eksternal (href diawali "http") berwarna biru dengan garis bawah.
Apa beda [href="#"] dengan [href^="#"]? Kapan yang kedua berguna?

Kunci: (1a) input[type="password"], (1b) a[href$=".pdf"], (1c) [data-aktif]. (2) a[href^="http"] { color: blue; text-decoration: underline; }. (3) Yang pertama hanya cocok persis "#"; yang kedua cocok semua anchor link (#bagian1, #bagian2) untuk styling navigasi satu halaman.

Istilah kunci

Atribut: informasi di tag HTML (misal type="text").
[attr]: memilih elemen yang PUNYA atribut itu.
[attr="x"]: nilai harus sama persis.
^= / $= / *=: diawali / diakhiri / mengandung nilai.
Case-sensitive: pencocokan yang membedakan huruf besar-kecil.

Kasus nyata: styling link unduhan

css

/* Link PDF: ikon + warna khusus, otomatis */
a[href$=".pdf"] {
  color: #dc2626;
  font-weight: 600;
}

a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 0.8em;
  color: #64748b;
}

Setiap link PDF di seluruh situs otomatis tertandai tanpa class. Tambahkan pola serupa untuk .zip dan mailto:.

Rangkuman

Selektor atribut menargetkan elemen lewat atribut yang sudah ada. Pola ^=, $=, *= membuka banyak trik: ikon link eksternal, styling input per tipe, dan menandai file unduhan, semua tanpa menyentuh HTML.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Form dan Link Cerdas

Di playground:

Buat input[type="email"] punya border hijau saat valid memakai input[type="email"]:valid.
Tambahkan aturan: link internal (href diawali / tapi bukan .pdf) berwarna hijau.
Tandai link PDF dengan teks "[PDF]" di depan memakai ::before dan [href$=".pdf"].

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox