Selector ialah sebuah pola (pattern) yang digunakan untuk �mencari� suatu tag di dalam HTML. Analogi untuk selector, misalnya: mencari semua tag p, atau mencari seluruh tag h1 yang mempunyai atribut class=judul.
Universal Selector
Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang �*�. Selector ini bertujuan untuk �mencari� semua tag yang ada.
* {
color: blue;
background-color: white;
}
Kode CSS diatas bermaksud untuk menciptakan seluruh tag HTML berwarna biru, dan background berwarna putih.
Element Type Selector
Element Type Selector atau Tag Selector ialah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan seluruh tag tersebut akan ditangkap oleh selector ini.
h1 {
text-decoration: underline;
}
p {
font-size:14px;
}
Contoh aba-aba CSS diatas akan menciptakan semua tag <h1> akan bergaris bawah, dan seluruh tag <p> akan berukuran 14pixel.
Efek dari element type selector ialah dari awal tag, hingga simpulan tag. Jika didalam tag <p> terdapat tag <i>, maka tag tersebut juga akan berukuran 14 pixel, hingga ditemui tag epilog </p>.
Class Selector
Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class Selector akan �mencari� seluruh tag yang mempunyai atribut class dengan nilai yang sesuai.
Untuk penggunaan Class Selector, kita harus mempunyai tag HTML yang mempunyai atribut class. Contohnya:
<p class=�paragraf_pertama�> Ini ialah sebuah paragraf pertama</p>
<h1 class=�judul�>Judul Artikel</h1>
<h2 class=�judul penting berwarna�>Sub Judul Artikel<h2>
Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class dengan nilainya ialah nama dari kelas itu sendiri. Sebuah nama class sanggup dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag sanggup mempunyai lebih dari 1 class.
Contohnya dalam baris terakhir pada rujukan diatas,tag h2 mempunyai atribut class=�judul penting berwarna�. Tag ini teridiri dari 3 class, yaitu judul, penting, dan class berwarna.
Sedangkan untuk aba-aba CSS Class Selector ialah sebagai berikut:
.paragraf_pertama {
color: red;
}
.judul {
font-size:20px;
}
.penting {
color:red;
font-size: 1em;
}
Untuk memakai class selector, di dalam CSS kita memakai tanda titik sebelum nama dari class.
Untuk rujukan 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 gotong royong dengan class selector merupakan selector paling umum dan juga sering digunakan (walau tidak sesering class selector). Penggunaan ID selector hampir sama dengan class selector, dengan perbedaan kalau pada Class Selector kita memakai atribut class untuk tag HTML, untuk ID selector, kita memakai atribut id.
Contoh penggunaan atribut id pada tag HTML
<p id=�paragraf_pembuka�> Ini ialah 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 aba-aba unik untuk masing-masing tag (terutama digunakan untuk aba-aba JavaScript). Karena hal tersebut, id yang digunakan harus unik dan dihentikan sama. Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan dihentikan sama.
Contoh penggunaan id selector aba-aba CSS Class Selector ialah sebagai berikut:
#paragraf_ pembuka {
color: red;
}
#judul utama {
font-size:20px
}
Di dalam aba-aba CSS, kita memakai tanda pagar �#� sebagai penanda bahwa kita mencari tag yang mempunyai id tersebut.
Attribute Selector
Selector dasar terakhir kita ialah attribute selector. Selector ini sedikit lebih advanced dibandingkan dengan selector-selector sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang mempunyai atribut yang dituliskan.
Contoh penggunaan Attribute Selector aba-aba CSS ialah sebagai berikut:
[href] {
font-size:20px ;
}
[type="submit"] {
width:30px;
}
Seperti yang sanggup dilihat dari rujukan diatas, setiap atribut selector harus berada diantara tanda kurung siku �[� dan �]�.
[href] akan cocok dengan seluruh tag yang mempunyai atribut href, apapun nilai dari href (href biasanya terdapat pada tag <a>). Untuk rujukan [type=�submit�] akan cocok dengan tag yang mempunyai atribut type dengan nilai submit, yang dalam hal ini ialah tombol submit dalam form.
Walaupun mempunyai kemampuan mencari tag yang sangat spesifik, namun atribut selector ini tidak terlalu sering digunakan.
Selain kelima selector dasar diatas, CSS masih mempunyai selector yang lebih �jauh� dalam menentukan tag yang akan dimanipulasi, salah satu contohnya, menyerupai pseudo selector yang digunakan untuk tiap event dari link, atau dikenal dengan efek mouseover, yaitu kita mencari kondisi pada ketika mouse berada di atas tag tertentu.
Sumber http://informasigameindo11.blogspot.com
EmoticonEmoticon