CSS Selectors: Jenis, Cara Membuat, dan Contoh

CSS selectors adalah mekanisme dalam memilih dan menargetkan elemen-elemen HTML tertentu dalam dokumen web untuk diberi style menggunakan CSS.

Dengan kata lain, selectors memungkinkan kita berkomunikasi langsung dengan elemen-elemen HTML, memberi tahu browser bagian mana yang harus diberi style khusus.

Bayangkan sebuah buku dengan ribuan kata; CSS selectors adalah alat yang menyorot kata-kata tertentu, memberinya warna, ukuran, atau style khusus. 

Di artikel ini, kita akan menyelami lebih detail tentang CSS selectors, memahami jenis-jenisnya, dan belajar bagaimana menggunakan dengan efektif untuk menciptakan desain web yang memikat. Selamat membaca!

Jenis-jenis CSS Selectors

Pada dasarnya, selector terdiri dari selector dasar dan selector lanjutan:

Selectors dasar

Selector dasar dipakai untuk menargetkan dan mengubah tampilan elemen HTML dengan mudah. Berikut jenis-jenis selector dasar:

#1 Element selector

Element selector menargetkan elemen berdasarkan jenisnya. Namun, perlu diingat bahwa penggunaan element selector mungkin tidak selalu ideal karena semua elemen dengan jenis yang sama akan terpengaruh.

Sebagai contoh, jika kamu menggunakan selector p untuk mengubah tampilan, semua elemen paragraf di halaman web akan mengalami perubahan tersebut. Oleh karena itu, disarankan untuk menggunakan pendekatan yang lebih spesifik saat styling elemen agar tidak mengubah tampilan keseluruhan elemen yang sama.

Dengan kode di atas, semua teks dalam elemen paragraf akan berwarna biru.

#2 Class selector

Selector ini menargetkan elemen berdasarkan atribut class. Menggunakan class selector yang diawali dengan tanda titik (.) sangat disarankan apabila kamu ingin beberapa elemen memiliki style sama untuk menciptakan konsistensi dalam desain.

Contohnya, kamu memiliki elemen dengan class "teks-merah".

Kamu dapat mengubah warna teksnya menjadi merah dengan kode CSS berikut:

#3 ID selector

ID selector menargetkan elemen berdasarkan atribut ID-nya.

ID dirancang untuk elemen yang unik dan harus berbeda dari elemen lainnya di halaman web. Oleh karena itu, ID selector sangat disarankan bagi elemen dengan style khusus yang berbeda dari lainnya.

Untuk menandai elemen dengan ID selector, kamu dapat menggunakan tanda pagar (#) sebelum nama ID.

Sebagai contoh, kamu memiliki elemen dengan ID "judul-utama".

Kamu dapat mengubah warna teksnya menjadi hijau dengan kode CSS berikut:

#4 Universal selector 

Dalam CSS, universal selector direpresentasikan dengan tanda bintang (*) dan digunakan untuk menargetkan semua elemen yang ada dalam dokumen HTML.

Meskipun tampak berguna, layaknya element selector, penggunaan universal selector sangat tidak disarankan karena akan memberikan style pada semua elemen di halaman web yang bisa mengakibatkan tampilan tidak diinginkan.

Selectors lanjutan

Berbeda dengan selector dasar, selector lanjutan memberikan kekuatan lebih untuk menargetkan elemen HTML dengan presisi tinggi. Berikut beberapa selector lanjutan yang paling sering digunakan:

#1 Attribute selector

Attribute selector memungkinkan kamu menargetkan elemen berdasarkan atribut dan nilai atributnya. Dirangkum dari Developer Mozilla, berikut list attribute selectors:

Sebagai contoh, untuk menargetkan semua elemen a dengan atribut target bernilai _blank, berikut kode yang akan dipakai:

#2 Pseudo-class selector

Pseudo-class selector berfungsi dalam menargetkan elemen berdasarkan keadaan tertentu, seperti saat elemen di-hover atau elemen pertama dalam grup.

Berikut beberapa list pseudo-class selector yang bisa digunakan:

Misalnya, untuk mengubah warna teks elemen a saat di-hover, kode yang digunakan sebagai berikut:

#3 Pseudo-element selector

Pseudo-element selector digunakan untuk menargetkan bagian spesifik dari elemen, seperti huruf pertama atau baris pertama dari teks.

Developer Mozilla juga memberikan list pseudo-element yang bisa diterapkan:

Contohnya, untuk memberikan style khusus pada huruf pertama dari setiap elemen p, berikut kodenya:

#4 Grouping selector

Grouping selector berguna untuk menargetkan beberapa elemen sekaligus dan memberikan style yang sama kepada elemen-elemen tersebut.

Contohnya, jika kamu ingin memberikan warna teks biru ke elemen h1, h2, dan h3, kamu bisa mengelompokkannya seperti berikut:

#5 Combinator selector

combinator dipakai untuk mendefinisikan hubungan antara dua selector atau lebih. Dengan combinator, kamu dapat menentukan bagaimana elemen-elemen tertentu dipilih berdasarkan hubungan mereka dengan elemen lain.

Ada beberapa jenis combinator dalam CSS:

FAQ (Frequently Asked Question)

Apakah setiap elemen di halaman web dapat ditargetkan dengan CSS selector?

Ya, dengan menggunakan kombinasi selector yang tepat, kamu dapat menargetkan setiap elemen di halaman web.

Apa yang dimaksud dengan specificity dalam CSS?

Specificity adalah aturan untuk menentukan style mana yang akan diterapkan jika ada konflik antara beberapa aturan. Aturan dengan specificity yang lebih tinggi akan diterapkan.

Meskipun tag !important dapat memberikan specificity tertinggi, penggunaannya sebaiknya dihindari karena dapat meng-overwrite style yang sama pada elemen dan membuat kode CSS lebih sulit dikelola.

Penutup

CSS selectors berfungsi untuk “berinteraksi” dengan elemen-elemen di halaman web, memberikan instruksi khusus tentang bagaimana elemen-elemen tersebut harus tampil.

Pemahaman mendalam tentang selector menjadi kunci untuk menciptakan desain web yang responsif dan menarik, mulai dari selector dasar (element, class, ID, universal) sampai selector lanjutan yang memanfaatkan hubungan antar elemen.