Apa itu CSS selector? Selector adalah istilah yang penting kamu pelajari dan pahami dalam penulisan kode CSS. Tujuannya adalah untuk membantumu dalam menentukan serta menerapkan style sheets yang sesuai. Untuk itu, artikel ini akan mengajakmu agar lebih memahami seputar CSS dan jenis-jenis selectornya.

Mengenai CSS Selector

Dalam dunia CSS, selector adalah rangkaian aturan yang mempunyai fungsi untuk menentukan elemen yang akan kamu berikan style (gaya). Ada juga yang menjelaskan selektor merupakan penyeleksi yang akan menemukan elemen HTML mana yang akan kamu beri gaya.

CSS sendiri bergantung atau menyesuaikan aturan pencocokan pola dalam menentukan gaya pada suatu elemen. Ini bertujuan untuk menentukan gaya mana yang paling tepat untuk diterapkan pada suatu elemen yang ada dalam dokumen.

Jenis-Jenis Selector

Ada beragam jenis CSS selektor yang biasanya dipakai pengguna dalam mencocokkan pola yang sesuai. Kemudian dari pola tersebut akan muncul gaya elemen yang akan ditampilkan pada website. Beberapa jenis selektor tersebut antara lain:

1. Selektor Tag HTML

Jenis penyeleksi yang pertama ini memakai nama-nama tag HTML. Sebenarnya semua elemen tag visual HTML bisa berperan sebagai penyeleksi. Akan tetapi, di setiap halaman HTML tersebut akan ada konten yang harus kamu tempatkan di tag HTML. Kemudian setiap set tag akan mewakili elemen sebuah halaman.

2. Selektor Class

Jenis yang kedua yaitu selektor class. Fungsi class selector ini yaitu memberikan elemen sesuai nama class yang sudah diberikan. Di dalam HTML, kamu akan menemukan tag-tag HTML yang secara umum mempunyai atribut class. Untuk membuatnya maka kamu perlu menambahkan tanda titik (.) di depannya.

3. Selektor ID

Sebenarnya pada selektor ID ini tidak jauh berbeda dengan jenis selektor class. Akan tetapi, ID cenderung bersifat unik. Pada selektor ID ini hanya boleh dipakai untuk satu elemen saja. Ciri utama selektor ini yaitu terdapat tanda pagar (#) di depannya. 

4. Selektor Atribut

Attribute selector adalah jenis penyeleksi yang mempunyai elemen dengan berdasarkan atribut. Jika kamu perhatikan, untuk selektor atribut tidak jauh berbeda dengan tag selektor.

5. Selektor Universal

Jenis selektor CSS yang kelima adalah tipe universal. Sesuai namanya, selector ini bisa kamu gunakan untuk menyeleksi seluruh elemen yang ada di jangkauan atau scope tertentu. 

Perlu kamu ingat, selektor universal umumnya dipakai untuk melakukan reset terhadap CSS. Mengapa perlu kamu reset? Biasanya di halaman HTML tersebut akan ada beberapa CSS bawaan browser. Tujuan reset ini yaitu menghilangkan CSS default dari browser tersebut.

6. Pseudo Selector

Berikutnya ada selektor yang bisa kamu gunakan untuk menentukan elemen semu. Misalnya elemen sebelum dan sesudah (before and after), elemen state, elemen ganjil, dan lain-lain. Setidaknya ada dua jenis pseudo selector yaitu:

a. Pseudo-class

Selektor yang dipakai untuk menentukan state pada elemen. Misalnya elemen ketika fokus, diklik, dan sebagainya. Selain itu, kamu juga dapat menentukan seperti apa tampilan pada elemen state tersebut.

b. Pseudo-element

Merupakan selektor yang kamu gunakan untuk menentukan elemen semu. Maksudnya elemen yang seolah-olah kamu tambahkan di HTML.

Jadi, Sudah Lebih Paham dengan CSS Selector?

Sekian pembahasan seputar CSS selector beserta jenis-jenisnya. Jadi, memahami CSS selector adalah sesuatu yang sangat penting. Apalagi ketika kamu ingin menjadi seorang yang profesional di bidang pengkodean CSS.

Melalui informasi ini, kamu jadi bisa tahu kira-kira bagaimana cara menyeleksi dan menentukan styling atau gaya yang sesuai di CSS. Semoga bermanfaat.