Jenis-jenis Selector Dasar CSS

belajar HTML dan CSS untuk pemula

CSS mempunyai jenis selector yang beraneka macam, bahkan sangat bermacam-macam bergantung kebutuhan kita untuk merancang halaman web. Dalam tutorial mengenal dasar selector CSS ini saya akan mengulas lima macam selector dasar di dalam CSS. Selector CSS tidak cuma lima macam ini, tetapi dalam sebagian besar kasus telah mencukupi untuk membuat sebuah halaman web HTML+CSS.

Selector ialah sebuah pola (pattern) yang dipakai untuk ‘mencari’ suatu tag di dalam HTML. Analogi untuk selector, contohnya: mencari seluruh tag p, atau mencari semua tag h1 yang mempunyai atribut class=judul.

CSS mempunyai banyak selector, kita akan mendiskusikannya satu persatu:

1. Universal Selector

Universal selector cuma ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini dimaksudkan untuk ‘mencari’ semua tag yang ada.

Contoh Universal Selector CSS:

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

2. Element Type Selector

Element Type Selector atau Tag Selector ialah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa dipakai sebagai selector, dan seluruh tag itu akan ditangkap oleh selector ini.

Contoh Element Type Selector CSS:

h1 

p

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

Dampak dari element type selector ialah dari awal tag, sampai akhir tag. Bila didalam tag <p> terdapat tag <i>, maka tag itu juga akan berukuran 14 pixel, sampai dijumpai tag penutup </p>.

3. Class Selector

Class Selector adalah salah satu selector yang amat umum dan paling biasa dipakai. Class Selector akan ‘mencari’ seluruh tag yang mempunyai atribut class dengan nilai yang cocok.

Untuk pemakaian Class Selector, kita perlu mempunyai tag HTML yang memiliki atribut class. Misalnya:

<p class=”paragraf_pertama”> Ini merupakan sebuah paragraf pertama</p>

<h1 class=”judul”>Judul Artikel</h1>

<h2 class=”judul penting berwarna”>Sub Judul Artikel<h2>

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

Misalnya dalam baris terakhir dalam contoh diatas,tag h2 mempunyai atribut class=”judul penting berwarna”. Tag ini teridiri dari 3 class, yaitu judul, penting, dan class berwarna.

Sedangkan untuk kode CSS Class Selector yaitu sebagai berikut:

.paragraf_pertama 

.judul
.penting

Untuk memakai class selector, di dalam CSS kita memakai tanda titik sebelum nama dari class.

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

4. ID Selector

ID Selector bersamaan dengan class selector merupakan selector paling umum dan juga biasa digunakan (meski tidak sesering class selector). Pemakaian ID selector hampir sama dengan class selector, dengan perbedaan bila pada Class Selector kita memakai atribut class untuk tag HTML, untuk ID selector, kita memakai atribut id.

Contoh pemakaian atribut id pada tag HTML

<p id=”paragraf_pembuka”> Ini merupakan sebuah paragraf pembuka</p>

<h1 id=”judul_utama”>Judul Artikel</h1>

<h2 id=”sub_judul”>Sub Judul Artikel<h2>

Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing-masing tag (terutama digunakan untuk kode JavaScript). Sebab hal itu, id yang dipakai harus unik dan tidak bisa sama. Dengan kata lain, id cuma bisa dipakai sekali pada sebuah halaman web dan tidak bisa sama.

Contoh pemakaian id selector kode CSS Class Selector yaitu sebagai berikut:

#paragraf_ pembuka 

#judul utama

Di dalam kode CSS, kita memakai tanda pagar “#” sebagai penanda bahwa kita mencari tag yang mempunyai id itu.

5. Attribute Selector

Selector dasar terakhir kita ialah attribute selector. Selector ini sedikit lebih advanced dibandingkan dengan selector-selector sebelumnya. Atribut Selector ini dipakai untuk mencari semua tag yang mempunyai atribut yang dituliskan.

Contoh pemakaian Attribute Selector kode CSS yaitu sebagai berikut:

[href] 

[type="submit"]

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

[href] akan sesuai dengan seluruh tag yang mempunyai atribut href, apapun nilai dari href (href pada umumnya terdapat di tag <a>). Untuk contoh [type=”submit”] akan sesuai dengan tag yang mempunyai atribut type dengan nilai submit, yang dalam hal ini merupakan tombol submit dalam form.

Meskipun mempunyai kemampuan mencari tag yang amat rinci, tetapi atribut selector ini tak terlalu biasa dipakai.

Selain kelima selector dasar diatas, CSS masih mempunyai selector yang lebih ‘jauh‘ dalam memilih tag yang akan dimanipulasi, salah satu misalnya, seperti pseudo selector yang dipakai untuk setiap event dari link, atau terkenal dengan efek mouseover, yaitu kita mencari keadaan di waktu mouse berada di atas tag tertentu. Pseudo Selector ini akan kita bahas pada lain kesempatan.

Itulah 5 selector dasar dalam CSS, yang selain berdiri sendiri, bisa juga digabungkan dengan selector lainnya untuk kebutuhan yang lebih khusus. Penggabungan selector ini akan kita bahas pada tutorial berikutnya Cara Pemakaian Selector CSS.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Recommended Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat