CSS: Jenis-Jenis Selector Dasar CSS

Assalamu'alaikum wr.wb

Pada postingan kali ini saya akan berbagi Jenis-Jenis Selector Dasar CSS. Selector adalah sebuah pola (pattern) yang digunakan untuk mencari sesuatu tag di dalam HTML. Analogi untuk selector, misalnya : mencari semua tag <p>, atau mencari seluruh tag <h1> yang memiliki atribut class=judul.

CSS mmemiliki banyak selector, disini saya akan membahas 5 jenis selector yang sering digunakan :

Universal Selector
Universal Selector hanya ada 1 didalam CSS, yaitu tanda bintang "*". Selector ini bertujuan untuk mencari semua tag yang ada.

Contoh Universal Selector CSS :

 Kode CSS diatas bermaksud untuk membuat seluruh tag HTML bewarna biru, dan background bewarna putih.

Elemen Type Selector
Elemen Type SElector atau Tag Selecctor adalah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan seluruh tag tersebut akan ditangkap pleh selector ini.

Contoh  Elemen Type Selector CSS:

Contoh kode CSS diatas akan membuat semua tag <h1> akan bergaris bawah, dan seluruh tag <p> akan berukuran 14pixel.

Efek dari Element Type Selector adalah dari awal tag, sampai akkhir tag. Jika didalam tag <p> terdapat tag <i>, maka tag tersebut juka akan berukuran 14pixel, sampai ditemui penutuo </p>.

Class Selector
Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class Selector akan mencari seluruh tag yang memiliki atribut class dengan nilai yang sesuai.

Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class. Contohnya:

Perhatikan semua tag diatas!, kita menambahkan atribut class dengan nilainya adalah nama dari class itu sendiri. Sebuah nama class dapat dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag dapat memiliki lebih dari 1 class.

Contohnya dalam baris terakhir pada contoh diatas, tag <h2> memiliki atribut class="judul penting bewarna". Tag ini terdiri dari 3 class, yaitu judul, penting, dan class bewarna.

Sedangkan untuk kode CSS Class Selector adalah sebagai berikut :

Untuk mmenggunakan Class Selector, didalam CSS kita gunakan tanda titik sebelum nama dari class.

Contoh : seluruh class yang memiliki nilai "paragraf_pertama", warna text akan menjadi merah, dan seluruh class "judul" akan memiliki font berukuran 20pixel.

ID Selector
ID Selector merupakan selector paling umum dan juga sering dipakai (walau tidak sesering class selector). Penggunaan ID Selector hampir sama dengan Class Selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID Selector lita menggunakan atribut id.

Contoh penggunaan atribut id pada tag HTML :

 Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing-masing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang digunakan harus unik dan tidak boleh sama. Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh sama.

Contoh ID Selector CSS :

Di dalam kode CSS, kita menggunakan tanda pagar “#” sebagai penanda bahwa kita mencari tag yang memiliki id tersebut.

Attribute Selector
Selector dasar terakhir kita adalah attribute selector. Selector ini sedikit lebih advanced dibandingkan dengan selector-selector sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan.

Contoh Attribute Selector CSS :

Seperti yang dapat dilihan dari contoh diatas, setiap Atribut Selector harus berada diantara tanda kurung siku "["dan"]".

[href] akan cocok dengan seluruh tag yang memiliki atribut href, apapun nilai dari href (href biasanya terdapat pada tag <a>). Untuk contoh [type=”submit”] akan cocok dengan tag yang memiliki atribut type dengan nilai submit, yang dalam hal ini adalah tombol submit dalam form.

 Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut selector ini tidak terlalu sering digunakan.

 Selain kelima selector dasar diatas, CSS masih memiliki selector yang lebih ‘jauh‘ dalam memilih tag yang akan dimanipulasi, salah satu contohnya, seperti pseudo selector yang digunakan untuk tiap event dari link, atau dikenal dengan efek mouseover, yaitu kita mencari kondisi pada saat mouse berada di atas tag tertentu. Pseudo Selector ini akan kita bahas pada lain kesempatan.

 Sekian pembahasan tentang Jenis-Jenis Selector Dasar CSS.

Semoga Beramanfaat...!!!

Wassalamu'alaikum wr.wb