Halo teman-teman semuanya, setelah sebelumnya kita belajar cara menambahkan CSS ke dalam HTML, sekarang kita akan bahas topik yang sangat penting dalam CSS, yaitu selector.
Selector adalah bagian dari CSS yang digunakan untuk memilih elemen HTML yang ingin kita beri style. Dengan selector, kita bisa menentukan dengan tepat elemen mana yang akan diubah tampilannya.
1. Tag Selector (Selector Berdasarkan Nama Tag)
Selector ini memilih elemen berdasarkan nama tag HTML-nya.
Contoh:
p {
color: blue;
}
Artinya: semua elemen <p> akan memiliki warna teks biru.
Contoh HTML:
<p>Ini paragraf biru</p>
<p>Ini juga biru</p>
2. Class Selector
Class digunakan untuk menandai satu atau lebih elemen HTML yang memiliki kesamaan. Untuk memilih class di CSS, kita gunakan tanda titik (.) di depan nama class.
Contoh:
.teks-merah {
color: red;
}
Contoh HTML:
<p class="teks-merah">Paragraf ini berwarna merah</p>
<span class="teks-merah">Span ini juga merah</span>
Catatan: Satu class bisa digunakan oleh banyak elemen, dan satu elemen bisa memiliki beberapa class.
3. ID Selector
ID digunakan untuk menandai satu elemen unik. Untuk memilih ID di CSS, kita gunakan tanda pagar (#) di depan nama ID.
Contoh:
#judul-utama {
font-size: 32px;
}
Contoh HTML:
<h1 id="judul-utama">Ini adalah judul utama</h1>
Catatan: ID sebaiknya unik — satu ID hanya digunakan untuk satu elemen di satu halaman.
4. Universal Selector
Universal selector digunakan untuk memilih semua elemen dalam dokumen HTML. Simbolnya adalah *.
Contoh:
* {
margin: 0;
padding: 0;
}
Artinya: semua elemen di-reset margin dan padding-nya menjadi 0.
Perbedaan Class vs ID
| Aspek |
Class |
ID |
| Tanda |
. |
# |
| Digunakan |
Banyak elemen |
Satu elemen saja |
| Contoh |
.kotak-merah |
#header |
| Tujuan |
Styling kelompok elemen |
Styling elemen yang unik |
Contoh Lengkap
Berikut adalah contoh HTML dan CSS lengkap yang menggunakan semua jenis selector yang telah kita pelajari:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Selector CSS</title>
<style>
* {
font-family: Arial, sans-serif;
}
p {
color: blue;
}
.teks-merah {
color: red;
}
#judul-utama {
font-size: 32px;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="judul-utama">Halo, Santri Koding!</h1>
<p>Ini paragraf berwarna biru.</p>
<p class="teks-merah">Ini paragraf berwarna merah.</p>
<span class="teks-merah">Ini juga teks merah.</span>
</body>
</html>
Kesimpulan
Selector digunakan untuk memilih elemen yang akan diberi style. Gunakan tag selector untuk nama tag, class selector untuk banyak elemen, dan ID selector untuk satu elemen unik.
Di artikel selanjutnya, kita akan membahas properti dasar dalam CSS, seperti pengaturan warna, jenis font, dan background.
Terima Kasih