Tutorial CSS / Selektor Dasar CSS: Tipe, Kelas, ID, dan Atribut

Selektor CSS mengidentifikasi elemen HTML yang diterapkan oleh sebuah aturan. Selektor tipe cocok dengan nama tag, selektor kelas cocok dengan label yang dapat digunakan kembali, selektor ID cocok dengan sebuah identifikasi, dan selektor atribut cocok dengan atribut atau nilainya.

Bandingkan selektor terhadap HTML yang sama

Mari kita baca selektor berdasarkan empat item berikut: A dan B adalah p dan memiliki kelas notice, dan B juga memiliki kelas urgent. C adalah p tanpa kelas, D adalah div dengan kelas notice. Huruf Inggris A~D hanya tanda untuk membedakan objek dalam deskripsi dan bukan sintaks CSS.

<p id="opening" class="notice" data-tags="garden visit">A: Operating hours</p>
<p class="notice urgent">B: Rainy weather notice</p>
<p>C: What you need</p>
<div class="notice">D: Information box</div>

Saat membaca sebuah selektor, pastikan kondisinya ada pada elemen itu sendiri yang akan diterapkan CSS. Dua kondisi di p.notice merujuk pada elemen yang sama. Di sisi lain, spasi di p .notice berarti mencari elemen lain di dalam p. Aturan yang mengubah target tergantung pada spasi dapat ditemukan bersamaan dengan struktur di Kombinator dan Kelas Semu CSS.

Gunakan selektor tipe dan universal

p { color: #333; }
* { box-sizing: border-box; }

p memilih semua elemen p. Sangat sederhana untuk menghias tag yang sama secara umum, tetapi untuk menghias paragraf pemberitahuan dan badan secara terpisah, diperlukan kondisi tambahan seperti class. Selektor universal * adalah notasi yang memilih semua elemen. Ini tidak secara otomatis menyertakan pseudo-elemen.

Di sini, box-sizing: border-box adalah pengaturan tambahan yang menghitung termasuk padding dan border saat menentukan lebar dan tinggi. Anda bisa melakukan latihan ini meskipun belum mempelajari secara rinci perhitungan ukuran. Menggunakan selektor universal tidak berarti Anda harus mengubah semua warna teks dan latar belakang sekaligus. Pikirkan tentang desain pengaturan umum dan elemen khusus.

Pilih class dan ID

.notice { background-color: #e9f7ef; }
p.notice { border-left: 4px solid #087f5b; }
.notice.urgent { font-weight: bold; }
#opening { color: #087f5b; }

Sebuah kelas dapat digunakan kembali untuk beberapa elemen. class="notice urgent" dalam HTML adalah daftar dari dua nama kelas dengan spasi, bukan satu nama notice urgent. Dalam CSS, tambahkan titik di depan untuk memilih .notice atau .urgent. .notice.urgent hanya berlaku untuk elemen yang memiliki kedua nama tersebut.

Sebuah ID harus unik dalam satu dokumen HTML. Jangan memberikan sepuluh pemberitahuan dengan id="opening" yang sama. Gunakan kelas untuk styling yang dapat digunakan kembali dan ID untuk identifikasi unik atau tujuan fragmen. Selektor ID memiliki spesifisitas lebih tinggi daripada selektor kelas, namun spesifisitas dibandingkan dalam kondisi asal, kepentingan, dan lapisan yang berlaku; menambahkan ID secara sembarangan membuat konflik lebih sulit dikelola. Untuk detail lebih lanjut, lihat Pewarisan, Spesifisitas, dan Kaskade CSS.

Dalam contoh, kami mewarnai berdasarkan ID untuk menunjukkan perbedaan di antara subjek. Jika Anda sebenarnya memerlukan warna hijau yang sama untuk beberapa pemberitahuan, Anda dapat menyederhanakannya dengan menambahkan warna ke aturan .notice. Pilih jenis selektor yang sesuai dengan sasaran gaya; Anda tidak perlu memakai semua jenis selektor dalam setiap aturan.

Cocokkan atribut dan nilainya

input[required] { border: 2px solid #087f5b; }
input[type="email"] { background-color: #fff4cc; }
[data-tags~="visit"] { outline: 1px dashed #777; }
a[href^="https://"] { color: #1d4ed8; }

Alamat https:// dapat menunjuk ke situs yang sama, jadi prefix itu sendiri tidak mengidentifikasi tautan eksternal. Demikian juga, [data-tags="visit"] cocok dengan seluruh nilai atribut dan tidak cocok dengan garden visit. Gunakan operator perbandingan yang sesuai untuk kondisi yang dimaksud. Lihat MDN: Selektor atribut.

Jalankan contoh selektor lengkap

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
* { box-sizing: border-box; }
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    p { color: #333; }
    .notice { background-color: #e9f7ef; padding: 12px; }
    p.notice { border-left: 4px solid #087f5b; }
    .notice.urgent { font-weight: bold; }
    #opening { color: #087f5b; }
    [data-tags~="visit"] { outline: 1px dashed #777; }
    a[href^="https://"] { color: #1d4ed8; }
    input[required] { border: 2px solid #087f5b; }
    input[type="email"] { background-color: #fff4cc; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p id="opening" class="notice" data-tags="garden visit">A: We open at 9am every day.</p>
  <p class="notice urgent">B: In case of rain, the outdoor program will be canceled.</p>
  <p>C: Bring a water bottle and comfortable shoes.</p>
  <div class="notice">D: This is an information box.</div>
  <p><a href="https://example.com/">E: External guidance link</a></p>
  <form>
    <label for="email">Email (required)</label>
    <input id="email" type="email" name="email" required>
    <button type="submit">Request information</button>
  </form>
</body>
</html>

Jika Anda menyimpan dan membuka dengan index.html, A·B·D akan memiliki latar belakang terang dan padding 12px, dan hanya A·B yang sesuai dengan p.notice yang akan memiliki border kiri. B memiliki kedua kelas dan terlihat tebal. A berwarna hijau karena ID-nya cocok dengan #opening, dan garis tepi putus-putus juga dibuat karena nilai atribut visit. C tetap menjadi paragraf biasa.

Batas kolom input email menjadi tebal dalam kondisi required, dan latar belakang menjadi kuning dalam kondisi type. Fungsi validasi input aktual untuk required ditangani oleh atribut HTML, dan CSS hanya mengubah tampilan kotak input. Alamat tautan eksternal dalam contoh hanya untuk tujuan ilustrasi. Harap jangan menggunakan ini sebagai tautan panduan ke layanan sebenarnya. Cara memilih keberadaan atribut berbeda dari cara memilih hasil verifikasi. Status Formulir CSS: Fokus, Validasi, disabled, dan readonly membandingkan selektor state required dan error secara bersama-sama.

Ubah kondisi dan prediksi hasil

1. Cobalah mengganti p.notice menjadi .notice untuk memperluas target dari batas kiri. Hasil yang diharapkan adalah bahwa batas yang sebelumnya hanya ada di A·B juga muncul di D. Setelah dikonfirmasi, kembalikan ke selektor asli.
2. Ubah kelas B menjadi class="urgent". B masih p, tetapi kehilangan kelas notice, sehingga latar panduan, batas kiri, dan teks tebal untuk .notice.urgent menghilang. Selektor kompleks tidak akan cocok hanya karena kelas urgent.
3. Ubah nilai data-tags A menjadi garden revisit. Karena tidak ada kata visit yang berdiri sendiri, garis putus-putus harus menghilang. Pastikan Anda tidak bingung antara visit dan revisit sebagai substring.

Untuk setiap latihan, simpan file dan kemudian segarkan untuk memeriksa dan mengembalikan ke nilai awal. Jika hanya objek yang diharapkan yang tidak berubah, bandingkan dulu nama kelas, ID, dan atribut yang sebenarnya. Anda dapat membedakan antara kesalahan selektoran dan konflik prioritas dengan melihat di alat pengembang untuk melihat apakah aturannya sesuai dengan elemen yang dipilih.