Kalau kamu lagi belajar CSS, pasti kamu udah sering denger istilah “selector.” Nah, selector ini sebenarnya adalah alat tempur utama di CSS buat memilih elemen HTML yang mau kamu kasih gaya (style). Gampangnya, tanpa selector, CSS kamu gak tahu harus ngatur elemen yang mana. Di artikel ini, kita bakal bahas berbagai jenis CSS selectors dari yang paling basic sampai yang sering dipakai banget, lengkap dengan contohnya. Yuk, kita mulai!
1. Apa Itu CSS Selector?
CSS Selector adalah bagian dari aturan CSS yang digunakan buat memilih elemen HTML tertentu. Setelah elemen itu dipilih, baru deh kamu bisa kasih warna, ubah ukuran font, tambahin border, dan lain-lain.
Contoh sederhana:
p {
color: blue;
}Selector-nya adalah p, yang artinya semua elemen <p> (paragraf) bakal dikasih warna biru.
Selengkapnya:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>Ini adalah paragraf berwarna biru.</p>
</body>
</html>Hasilnya:
2. The CSS Element Selector
Selector ini yang paling basic. Kamu tinggal nulis nama elemen HTML-nya aja.
Contoh:
h1 {
font-size: 30px;
}Artinya: Semua elemen <h1> di halaman akan punya ukuran font 30px.
Selengkapnya:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 30px;
}
</style>
</head>
<body>
<h1>Judul Utama</h1>
</body>
</html>Hasilnya:
3. The CSS ID Selector
Kalau kamu pengen styling khusus buat satu elemen aja, pakai ID selector. Simbolnya pake tanda pagar #.
Contoh HTML:
<p id="intro">Halo semuanya!</p>Contoh CSS:
#intro {
color: green;
}Artinya: Hanya elemen dengan id="intro" yang bakal jadi hijau.
Contoh dengan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
#intro {
color: green;
}
</style>
</head>
<body>
<p id="intro">Halo semuanya!</p>
</body>
</html>Hasilnya:
4. The CSS Class Selector
Kalau kamu mau kasih gaya ke banyak elemen yang punya ciri sama, pakai class selector. Simbolnya titik ..
Contoh HTML:
<p class="highlight">Ini paragraf pertama.</p>
<div class="highlight">Ini div yang sama-sama penting.</div>Contoh CSS:
.highlight {
background-color: yellow;
}Artinya: Semua elemen yang punya class highlight bakal punya background kuning.
Contoh dengan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p class="highlight">Ini paragraf pertama.</p>
<div class="highlight">Ini div yang sama-sama penting.</div>
</body>
</html>Hasilnya:
5. The CSS Universal Selector
Selector ini bisa milih semua elemen yang ada di halaman. Simbolnya bintang *.
Contoh:
* {
margin: 0;
padding: 0;
}Artinya: Semua elemen di halaman gak punya margin dan padding. Biasanya dipakai di awal buat reset style default browser.
Contoh dengan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>Hasilnya:
6. The CSS Grouping Selector
Kalau kamu pengen kasih style yang sama ke beberapa elemen sekaligus, kamu bisa kelompokkan mereka pake koma ,.
Contoh:
h1, h2, h3 {
font-family: 'Arial', sans-serif;
}Artinya: Semua heading dari h1 sampai h3 bakal pakai font Arial.
Contoh dengan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, h3 {
font-family: 'Arial', sans-serif;
}
</style>
</head>
<body>
<h1>Judul H1</h1>
<h2>Judul H2</h2>
<h3>Judul H3</h3>
</body>
</html>Hasilnya:
7. Daftar CSS Simple Selectors (Tabel)
| Jenis Selector | Contoh | Deskripsi |
|---|---|---|
| Element Selector | p |
Memilih semua elemen <p> |
| ID Selector | #judul |
Memilih elemen dengan id="judul" |
| Class Selector | .kotak |
Memilih semua elemen dengan class="kotak" |
| Universal Selector | * |
Memilih semua elemen di halaman |
| Grouping Selector | h1, p, .box |
Memilih beberapa elemen sekaligus dalam satu aturan CSS |
Penutup
Nah, itu dia pembahasan santai tentang berbagai macam CSS Selectors. Selector ini penting banget karena jadi dasar dari semua styling di halaman web. Kalau kamu udah paham dan terbiasa pakai berbagai selector, dijamin ngoding CSS bakal jadi lebih asyik dan efisien.
Selamat ngoding, dan jangan lupa eksplor lebih banyak kombinasi selector lainnya ya. Nanti ada juga selector yang lebih kompleks kayak pseudo-class dan attribute selector, tapi kita simpan itu buat artikel selanjutnya. Stay tuned!
Komentar