CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain tampilan sebuah website. Jika HTML bertanggung jawab untuk struktur dan konten, maka CSS mengatur bagaimana konten tersebut akan terlihat. Salah satu konsep dasar namun penting dalam CSS adalah selektor. Selektor menentukan elemen HTML mana yang akan diberi gaya. Bagi pemula, mungkin sedikit membingungkan, namun jangan khawatir! Artikel ini akan membahas selektor CSS dengan cara yang mudah dipahami.
Apa Itu Selektor di CSS?
Selektor di CSS adalah bagian dari kode yang menentukan elemen HTML mana yang akan dipengaruhi oleh aturan CSS. Saat kita membuat gaya, kita harus menentukan elemen mana yang akan diberi gaya menggunakan selektor.
Sebagai contoh, jika Kamu ingin memberi warna pada semua teks paragraf di halaman web, selektor CSS Kamu akan memilih elemen <p> (paragraf) dan memberi gaya yang diinginkan.
Contoh:
p {
color: blue;
}Kode ini memberi tahu browser, “Pilih semua elemen <p> di halaman dan ubah warnanya menjadi biru.”
Hasilnya:
See the Pen Belajar-CSS by Aes saputra (@aessaputra) on CodePen.
Jenis-Jenis Selektor CSS
Ada beberapa jenis selektor dalam CSS. Mari kita bahas satu per satu.
Selektor Tag (Tag Selector)
Selektor tag adalah jenis selektor yang paling sederhana. Ini digunakan untuk memilih semua elemen HTML dengan tag tertentu. Misalnya, jika Kamu ingin mengatur gaya semua elemen heading <h1>, Kamu bisa menggunakan selektor tag.
Contoh:
h1 {
font-size: 36px;
}Semua elemen <h1> di halaman akan memiliki ukuran font 36px.
Hasilnya:
See the Pen Belajar-CSS by Aes saputra (@aessaputra) on CodePen.
Selektor Kelas (Class Selector)
Kadang-kadang, Kamu mungkin ingin memberikan gaya tertentu hanya pada beberapa elemen, bukan semuanya. Di sinilah selektor kelas berguna. Kelas di CSS didefinisikan dengan awalan titik (.) diikuti dengan nama kelas yang sudah didefinisikan dalam HTML.
Contoh HTML:
<p class="highlight">Teks ini akan memiliki gaya khusus.</p>
<p>Teks ini tidak akan terpengaruh.</p>Contoh CSS:
.highlight {
background-color: yellow;
}
Dalam contoh ini, hanya paragraf dengan kelas highlight yang akan memiliki latar belakang berwarna kuning.
Hasilnya:
See the Pen Belajar-CSS by Aes saputra (@aessaputra) on CodePen.
Selektor ID (ID Selector)
ID selector mirip dengan class selector, tapi digunakan untuk elemen yang unik, hanya muncul sekali dalam satu halaman. Untuk menggunakan selektor ID, Kamu harus menambahkan tanda pagar (#) di depan nama ID.
Contoh HTML:
<div id="header">Ini adalah header</div>Contoh CSS:
#header {
background-color: lightblue;
}Elemen dengan id="header" akan memiliki latar belakang biru muda. Ingat, setiap ID harus unik di dalam satu halaman, sedangkan kelas bisa digunakan berkali-kali.
Hasilnya:
See the Pen Belajar-CSS by Aes saputra (@aessaputra) on CodePen.
Selektor Atribut (Attribute Selector)
Selektor ini digunakan untuk memilih elemen berdasarkan atribut tertentu. Ini sangat berguna ketika Kamu ingin menargetkan elemen dengan nilai atribut tertentu, seperti tombol dengan tipe submit atau link dengan atribut target="_blank".
Contoh:
input[type="text"] {
border: 1px solid black;
}Dalam contoh ini, semua elemen <input> yang memiliki tipe text akan mendapatkan border hitam.
Hasilnya:
See the Pen Belajar-CSS by Aes saputra (@aessaputra) on CodePen.
Selektor Grup (Group Selector)
Kamu bisa menggunakan selektor grup untuk menerapkan aturan gaya yang sama ke beberapa elemen sekaligus. Ini dilakukan dengan memisahkan selektor dengan tanda koma.
Contoh:
h1, h2, h3 {
font-family: Arial, sans-serif;
}Aturan ini akan diterapkan pada elemen heading <h1>, <h2>, dan <h3>, sehingga semua akan menggunakan font Arial.
Hasilnya:
See the Pen Untitled by Aes saputra (@aessaputra) on CodePen.
Selektor Descendant (Descendant Selector)
Selektor descendant digunakan untuk menargetkan elemen yang berada di dalam elemen lain. Sebagai contoh, Kamu mungkin ingin hanya memberi gaya pada elemen <p> yang berada di dalam elemen <div>.
Contoh:
div p {
color: red;
}Semua paragraf yang ada di dalam elemen <div> akan diberi warna merah, tapi paragraf di luar <div> tidak akan terpengaruh.
Hasilnya:
See the Pen Belajar-CSS by Aes saputra (@aessaputra) on CodePen.
Selektor Pseudo-Class dan Pseudo-Element
Pseudo-class dan pseudo-element digunakan untuk menargetkan keadaan atau bagian tertentu dari elemen, seperti elemen ketika hover atau elemen pertama dari tipe tertentu.
Contoh Pseudo-Class (Hover):
a:hover {
color: green;
}
Ketika pengguna mengarahkan kursor ke link, teksnya akan berubah menjadi hijau.
Contoh Pseudo-Element (First Letter):
p::first-letter {
font-size: 200%;
}Huruf pertama dari setiap paragraf akan diperbesar menjadi dua kali lipat ukuran font normal.
Hasilnya:
See the Pen Belajar-CSS by Aes saputra (@aessaputra) on CodePen.
Tips Menggunakan Selektor CSS dengan Efektif
- Gunakan Kelas daripada ID untuk Reusabilitas
Kelas lebih fleksibel karena bisa digunakan berkali-kali pada banyak elemen, sedangkan ID hanya bisa digunakan satu kali dalam satu halaman. - Jangan Terlalu Spesifik
Selektor yang terlalu spesifik bisa menyulitkan pengelolaan gaya di masa mendatang. Cobalah untuk menulis aturan yang simpel dan mudah diubah. - Manfaatkan Pseudo-Class untuk Interaksi
Pseudo-class seperti:hoveratau:focusbisa membuat tampilan lebih interaktif tanpa JavaScript. - Kelompokkan Aturan yang Sama
Jika beberapa elemen berbagi aturan gaya yang sama, gunakan selektor grup untuk menjaga kode tetap bersih dan ringkas.
Kesimpulan
Selektor adalah bagian fundamental dari CSS, dan memahami cara kerjanya bisa membantu Kamu mengontrol desain halaman web dengan lebih efektif. Mulailah dengan selektor sederhana seperti tag, kelas, dan ID, lalu perlahan-lahan eksplorasi selektor yang lebih kompleks seperti pseudo-class dan descendant.
Dengan latihan, Kamu akan semakin mahir dalam menulis CSS dan membuat halaman web yang cantik serta fungsional! Semoga artikel ini membantu Kamu memahami selektor CSS dengan lebih baik. Happy coding!