Mengenal Simple Selectors dalam CSS untuk Pemula

Halo teman-teman!

Setelah sebelumnya kita membahas syntax CSS dan bagaimana struktur penulisan yang benar, sekarang kita akan lanjut mengenal simple selectors. Ini adalah jenis selector paling dasar dalam CSS dan penting banget untuk kamu kuasai sebelum masuk ke selector yang lebih kompleks.

Simple selectors digunakan untuk memilih elemen HTML berdasarkan nama tag, class, atau ID. Yuk kita bahas satu per satu supaya makin paham!

Apa Itu Selector dalam CSS?

Selector adalah bagian dari syntax CSS yang digunakan untuk memilih elemen HTML yang ingin kita beri gaya (style). Tanpa selector, kita nggak bisa menentukan elemen mana yang harus diubah tampilannya.

Simple selectors terdiri dari tiga jenis:

1. Selector Berdasarkan Nama Tag

Selector ini memilih elemen berdasarkan nama tag HTML-nya langsung. Misalnya kita ingin memberi warna biru ke semua elemen <p>.

p {
  color: blue;
}

Contoh penggunaan di HTML:

<p>Ini paragraf pertama.</p>
<p>Ini paragraf kedua.</p>

Semua paragraf akan berubah jadi biru karena selector p berlaku untuk semua elemen <p>.

2. Selector Berdasarkan Class

Selector ini digunakan untuk memilih elemen yang memiliki atribut class. Di CSS, penulisan class diawali dengan titik (.).

.kotak {
  width: 100px;
  height: 100px;
  background-color: green;
}

HTML-nya:

<div class="kotak"></div>
<div class="kotak"></div>

Semua elemen dengan class kotak akan diberi gaya sesuai kode CSS di atas.

3. Selector Berdasarkan ID

ID bersifat unik, jadi hanya digunakan untuk satu elemen saja. Penulisan ID di CSS diawali dengan tanda pagar (#).

#judul {
  font-size: 24px;
  color: red;
}

HTML-nya:

<h1 id="judul">Ini adalah judul utama</h1>

Karena id="judul" hanya dipakai satu kali, maka gaya ini hanya berlaku ke satu elemen saja.

Perbedaan Antara Class dan ID

Kadang pemula bingung: kapan harus pakai class dan kapan pakai ID?

Class	ID
Bisa digunakan oleh banyak elemen	Hanya boleh satu kali dalam satu halaman
Ditulis dengan titik (.)	Ditulis dengan pagar (#)
Cocok untuk grup elemen yang punya gaya seragam	Cocok untuk satu elemen khusus

Tips: Gunakan class jika kamu ingin menerapkan style ke beberapa elemen sekaligus. Gunakan ID jika kamu ingin menandai elemen spesifik yang benar-benar unik.

Menggabungkan Beberapa Selector

Kita juga bisa menggunakan beberapa selector sekaligus untuk memberikan gaya yang sama ke elemen berbeda:

h1, h2, p {
  font-family: Arial, sans-serif;
}

Artinya, semua <h1>, <h2>, dan <p> akan memakai font yang sama.

Yuk Coba Sendiri!

Sekarang giliran kamu buat eksperimen! Coba buat file HTML sederhana, lalu tambahkan style dengan selector yang berbeda-beda. Bisa dimulai dari memberi warna ke paragraf, menata ukuran kotak dengan class, atau memberi gaya unik ke judul dengan ID.

Semakin sering latihan, kamu akan makin terbiasa menggunakan selector yang tepat. Ini adalah dasar penting sebelum kamu belajar selector yang lebih kompleks seperti pseudo-class dan kombinator.

Terus semangat ya teman-teman! Jangan takut coba-coba, karena dari situ kita bisa belajar lebih cepat dan lebih dalam.

Di materi selanjutnya, kita akan bahas tentang bagaimana cara menyisipkan CSS ke dalam file HTML secara praktis dan efisien.

Baca juga