Tutorial CSS Selector Lengkap: ID, Class, dan Universal Selector
CSS selector merupakan fondasi penting dalam dunia front-end development. Selector digunakan untuk memilih elemen HTML yang ingin diberi gaya (style). Tanpa memahami selector, seorang developer akan kesulitan mengatur tampilan halaman web secara efisien.
Artikel ini membahas berbagai jenis selector CSS, termasuk ID selector, Class selector, dan Universal selector, lengkap dengan contoh dan penjelasan cara penggunaannya.
Daftar isi
Baca juga: Struktur Dasar Penulisan CSS: Selector, Property, dan Value
Apa Itu CSS Selector?
CSS selector adalah bagian dari sintaks CSS yang digunakan untuk menentukan elemen HTML mana yang akan dikenai aturan gaya (style). Setiap selector akan diikuti oleh blok deklarasi yang berisi property dan value.
Contoh struktur dasar penulisan CSS:
selector {
property: value;
}Code language: CSS (css)Misalnya:
p {
color: blue;
font-size: 16px;
}Code language: CSS (css)Pada contoh di atas, p adalah selector yang memilih seluruh elemen paragraf (<p>), sedangkan color dan font-size adalah property dengan nilainya masing-masing.
Jenis-Jenis CSS Selector
CSS memiliki berbagai macam selector, namun tiga yang paling sering digunakan adalah:
- ID Selector (
#id) - Class Selector (
.class) - Universal Selector (
*)
Mari kita bahas satu per satu dengan contoh penggunaannya.
1. ID Selector CSS
ID selector digunakan untuk memilih elemen HTML yang memiliki atribut id tertentu. Dalam penulisan CSS, ID diawali dengan tanda pagar (#).
Contoh HTML:
<h1 id="judul">Belajar CSS Selector</h1>Code language: HTML, XML (xml)Contoh CSS:
#judul {
color: red;
text-align: center;
}Code language: CSS (css)Penjelasan:
#judul→ menargetkan elemen dengan id=”judul”- Warna teks diubah menjadi merah, dan posisinya diatur agar rata tengah.
Catatan penting:
ID bersifat unik, artinya hanya boleh digunakan sekali dalam satu halaman HTML. Jika digunakan lebih dari sekali, bisa menyebabkan konflik dalam styling.
2. Class Selector CSS
Class selector digunakan untuk memilih satu atau lebih elemen yang memiliki atribut class tertentu. Class diawali dengan tanda titik (.).
Contoh HTML:
<p class="highlight">Ini teks dengan gaya khusus.</p>
<p class="highlight">Teks ini juga memiliki gaya yang sama.</p>Code language: HTML, XML (xml)Contoh CSS:
.highlight {
background-color: yellow;
color: black;
}Code language: CSS (css)Penjelasan:
.highlight→ menargetkan semua elemen dengan class “highlight”- Semua elemen yang memiliki class tersebut akan mendapatkan warna latar kuning dan teks hitam.
Class lebih fleksibel dibanding ID karena bisa digunakan berulang kali pada banyak elemen.
3. Universal Selector CSS
Universal selector menggunakan tanda bintang (*) dan berfungsi untuk memilih semua elemen dalam halaman HTML.
Contoh CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Code language: CSS (css)Penjelasan:
- Semua elemen HTML akan diatur agar tidak memiliki margin dan padding bawaan (reset style).
- Ini sering digunakan di awal proyek sebagai CSS reset agar tampilan lebih konsisten di berbagai browser.
Contoh Lengkap Penggunaan CSS Selector
Berikut contoh penerapan ketiga selector dalam satu halaman HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh CSS Selector</title>
<style>
* {
box-sizing: border-box;
}
#judul {
color: #2c3e50;
text-align: center;
}
.highlight {
background-color: #f1c40f;
color: #2c3e50;
padding: 10px;
}
</style>
</head>
<body>
<h1 id="judul">Belajar CSS Selector</h1>
<p class="highlight">Ini contoh penggunaan class selector.</p>
<p>Paragraf ini tidak memiliki class.</p>
</body>
</html>Code language: HTML, XML (xml)Penjelasan:
- Selector
*diterapkan untuk semua elemen. - Selector
#judulhanya berlaku pada elemen<h1>dengan IDjudul. - Selector
.highlightditerapkan pada paragraf yang memiliki class dengan nama yang sama.
Perbedaan ID, Class, dan Universal Selector
| Jenis Selector | Simbol | Target Elemen | Penggunaan Utama |
|---|---|---|---|
| ID Selector | # | Satu elemen unik | Untuk elemen spesifik seperti header utama |
| Class Selector | . | Banyak elemen | Untuk grup elemen dengan gaya sama |
| Universal Selector | * | Semua elemen | Untuk reset atau aturan global |
CSS Selector Lain yang Perlu Dikenal
Selain tiga selector utama di atas, ada juga jenis selector lainnya seperti:
- Element Selector (
p,h1,div) → memilih elemen berdasarkan tag. - Attribute Selector (
[type="text"]) → memilih elemen berdasarkan atribut tertentu. - Combinator Selector (
div p) → memilih elemen berdasarkan relasi antar elemen. - Pseudo-class Selector (
a:hover) → memilih elemen pada keadaan tertentu.
Contoh kombinasi selector:
div.highlight p:hover {
color: blue;
}Code language: CSS (css)Artinya: ketika kursor diarahkan ke paragraf di dalam elemen div yang memiliki class highlight, teks akan berubah menjadi biru.
Kesimpulan
CSS selector adalah bagian fundamental dalam mengatur tampilan elemen HTML. Dengan memahami cara kerja ID, Class, dan Universal selector, kamu dapat menulis CSS yang lebih efisien dan terstruktur.
Selector memungkinkan developer mengontrol tampilan halaman web dengan cara yang fleksibel, efisien, dan mudah dipelihara.
