download-b

Tutorial Belajar CSS Part 5: Mengenal Jenis-jenis Selector Dasar CSS

Posted on

CSS mempunyai jenis selector yang bervariasi, bahkan benar-benar beragam tergantung keperluan kita bagi mendesain halaman web. Pada tutorial mengenal dasar selector CSS ini saya akan membahas 5 jenis selector basic di pada CSS. Selector CSS tak hanya 5 jenis ini, namun pada kebanyakan kasus telah mencukupi bagi merancang sebuah halaman web HTML+CSS.

Selector ialah sebuah pola (pattern) yang digunakan bagi ‘mencari’ suatu tag di pada HTML. Analogi bagi selector, misalnya: mencari seluruh tag p, atau mencari seluruh tag h1 yang mempunyai atribut class=judul.

CSS mempunyai banyak selector, kita akan membahasnya satu persatu:


Universal Selector

Universal selector hanya ada 1 di pada CSS, yaitu tanda bintang “*”. Selector ini bertujuan bagi ‘mencari’ seluruh tag yang terdapat.

Contoh Universal Selector CSS:

Kode CSS diatas bermaksud bagi merancang seluruh tag HTML berwarna biru, dan background berwarna putih.


Element Type Selector

Element Type Selector atau Tag Selector ialah istilah bagi selector yang nilainya adalah sebuah tag HTML itu sendiri. Setiap tag HTML dapat digunakan selaku selector, dan seluruh tag tersebut akan ditangkap oleh selector ini.

Contoh Element Type Selector CSS:

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

Efek dari element type selector ialah dari awal tag, hingga ahir tag. Apabila didalam tag <p> terdapat tag <i>, karenanya tag tersebut pun akan berukuran 14 pixel, hingga ditemui tag penutup </p>.


Class Selector

Class Selector adalah sebuah diantara selector yang sangat umum dan sangat sering digunakan. Class Selector akan ‘mencari’ seluruh tag yang mempunyai atribut class dengan nilai yang sesuai.

Bagi pemakaian Class Selector, kita mesti mempunyai tag HTML yang mempunyai atribut class. Contohnya:

Perhatikan bahwa bagi seluruh tag diatas, kita menambahkan atribut class dengan nilainya ialah nama dari kelas itu sendiri. Sebuah nama class dapat dimiliki oleh lebih dari 1 tag, dan pada sebuah tag dapat mempunyai lebih dari 1 class.

Contohnya pada baris terakhir di contoh diatas,tag h2 mempunyai atribut class=”judul urgen berwarna”. Tag ini teridiri dari 3 class, yaitu judul, urgen, dan class berwarna.

Sedangkan bagi kode CSS Class Selector ialah selaku berikut:

Bagi menggunakan class selector, di pada CSS kita menggunakan tanda titik sebelum nama dari class.

Bagi contoh kita, seluruh class yang mempunyai nilai “paragraf_pertama”, warna text akan menjadi merah. Dan seluruh class judul akan mempunyai font 20 pixel.


ID Selector

ID Selector bersama-sama dengan class selector adalah sebuah selector sangat umum dan pun sering diaplikasikan (walau tak sesering class selector). Pemakaian ID selector hampir sama dengan class selector, dengan perbedaan kalau di Class Selector kita menggunakan atribut class bagi tag HTML, bagi ID selector, kita menggunakan atribut id.

Contoh pemakaian atribut id di tag HTML

Atribut id selain bagi selector CSS, pun berperan selaku kode unik bagi masing-masing tag (terutama diaplikasikan bagi kode JavaScript). Karena hal tersebut, id yang digunakan mesti unik dan tak boleh sama. Dengan kata lain, id hanya dapat digunakan satu kali pada sebuah halaman web dan tak boleh sama.

Contoh pemakaian id selector kode CSS Class Selector ialah selaku berikut:

Di pada kode CSS, kita menggunakan tanda pagar “#” selaku penanda bahwa kita mencari tag yang mempunyai id tersebut.


Attribute Selector

Selector basic terakhir kita ialah attribute selector. Selector ini sedikit lebih advanced dibandingi dengan selector-selector sebelumnya. Atribut Selector ini digunakan bagi mencari seluruh tag yang mempunyai atribut yang dituliskan.

Contoh pemakaian Attribute Selector kode CSS ialah selaku berikut:

Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector mesti berada diantara tanda kurung siku “[” dan “]”.

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

Walaupun mempunyai kemampuan mencari tag yang benar-benar spesifik, namun atribut selector ini tak terlalu sering digunakan.


Selain kelima selector basic diatas, CSS masih mempunyai selector yang lebih ‘jauh‘ pada memilih tag yang akan dimanipulasi, diantara contohnya, seperti pseudo selector yang digunakan bagi tiap event dari link, atau dikenal dengan efek mouseover, yaitu kita mencari kondisi di ketika mouse berada di atas tag tertentu. Pseudo Selector ini akan kita bahas di lain kesempatan.

Demikianlah 5 selector basic pada CSS, yang selain berdiri sendiri, dapat pun digabungkan dengan selector lainnya bagi kebutuhan yang lebih khusus. Penggabungan selector ini akan kita bahas di panduan berikutnya Cara Penggunaan Selector CSS.


eBook CSS Uncover Duniailkom

Apabila sahabat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/