Selector Dasar dalam CSS

Selector Dalam CSS

Selector adalah sebuah tag HTML yang digunakan pada CSS agar element tersebut dapat dimanipulasi atau ditambahkan gaya pada CSS, selector dapat berupa tag HTML itu sendiri, atau bisa juga berupa nilai atribut class atau Id pada tag HTML.

Selector digunakan untuk mencari bagian web yang ingin dimanipulasi atau yang ingin di style. Selector paling dasar dari CSS adalah tag P, I, H1, LI, dan lain-lain. Selector dalam CSS dapat menjadi kompleks tergantung pada kebutuhannya.

 

SELECTOR DASAR DALAM CSS

1. Universal Selector

Universal selector dalam CSS hanya ada satu yaitu tanda bintang “*”. Selector ini berfungsi  untuk mencari semua tag yang ada dalam halaman HTML. Contoh:

Maksud dari kode program diatas yaitu bahwa seluruh tag HTML yang ada semuanya berwarna biru, dengan background berwarna merah.

 

2. Element Type Selector

Elemen type selector atau tag selector adalah sebuah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan seluruh tag tersebut ditangkap oleh seletor ini. Contoh:

Maksud dari kode program CSS diatas yaitu akan membuat semua tag H1 akan menjadi bergaris bawah. Dan  seluruh tag P akan  berukuran 20 pixel.

Efek dari elemen type selector adalah dari tag awal sampai akhir dari tag. Misalnya jika didalam tag P terdapat tag I, maka tag I tersebut akan berukuran 20 pixel, sampai akhir dari tag P tersebut.

 

3. Class Selector

Class selector merupakan salah satu selector yang paling umum dan juga paling sering digunakan. Class selector tersebut akan mencari semua tag yang memiliki atrubut  class dengan nilai yang sama. Untuk penggunaan tag ini kita harus mempunyai tag HTML yang mempunyai atribut class. Dalam penulisan class selector dalam CSS ini kita harus mengggunakan tanda titik “.” sebelum nama dari class yang sudah kita buat. Contoh:

Pada kode diatas, kita menambahkan atribut class dengan nilainya yaitu Judul dan Artikel. Sebuah nama class dapat dimiliki oleh lebih dari 1 tag, dan dalam  sebuah tag dapat memiliki lebih dari satu class.

 

4. ID Selector

Id selector juga merupakan selector yang paling umum yang banyak digunakan sama halnya dengan class selector. Dalam penggunaannya juga sama seperti class selector, hanya perbedaannya adalah jika pada class selector kita menggunakan atribut class untuk tag HTML, namun untuk id selector, kita menggunakan atribut id.

Selain berfungsi untuk selector, atribut id juga berfungsi sebagai kode unik untuk masing-masing tag (terutama dipakai untuk kode pada javascript). Maka karena hal tersebut untuk penamaan atribut Id harus menggunakan nama yang unik dan tidak boleh ada yang sama. Dalam penulisannya atribut id ini menggunakan tanda pagar “#”.

 

5. Atribut Selector

Artibut selector ini lebih advanced jika dibandingkan dengan selector-selector yang lainnya. Atribut selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan. Setiap penulisannya, atribut selector harus berada diantara kurung siku “[“ dan “]”. Contoh:

[Href] diatas akan akan cocok dengan seluruh tag yang memiliki atribut href yang biasanya ada didalam tag A. Untuk contoh [type=”submit”] akan cocok dengan tag yang memiliki atribut type dengan nilai submit, yang banyak digunakan dalam tombol submit dalam form.

Nah, itulah beberapa selector dasar pada CSS, yang bisa berdiri sendiri, dan juga dapat digabungkan dengan selector yang lainnya untuk keperluan yang lebih khusus.