Bismillah. Alhamdulillah. Membahas tentang CSS terkadang sangatlah membingungkan. Karena jika diibaratkan, bahasa CSS adalah make-up untuk mempercantik penampilan suatu elemen. Sederhananya, CSS itu berpengaruh terhadap suatu elemen, namun tidak mampu membuat atau menciptakan elemen. CSS hanya akan tampak menarik jika bersatu dengan suatu elemen, namun tidak mampu berdiri sendiri. Pemahaman, pengetahuan dan pengalaman yang kurang dalam menggunakan CSS kadang berakibat cukup fatal dengan tidak tampilnya suatu elemen, bergesernya posisi elemen, tertutupnya elemen satu oleh elemen lainnya, posisi yang tidak rata dan seimbang dan lain sebagainya, dan kita sering kesulitan untuk mencari solusinya ketika ratusan bahkan ribuan baris CSS telah dituliskan.
Pada artikel sebelumnya telah dibahas tentang CSS Selector Bagian 1, mudahan-mudahan artikel tersebut telah dipahami dengan baik dan sudah dilakukan trial and error untuk menemukan letak perbedaan dan kehebatan masing-masing fungsinya. Jika belum memahaminya dengan baik, ada baiknya terus dilakukan percobaan dan penelaahan sampai kita benar-benar memahaminya. Pemahaman yang baik akan melahirkan keyakinan yang kuat, dan ini tentunya modal dasar seorang web desainer. Yakin anda sudah paham dengan CSS Selector bagian 1? Jika merasa yakin, mari kita lanjutkan ke pembahasan CSS Selector bagian 2...
(11) X[href="foo"]
Selector ini lebih cocok jika disebut sebagai url filter selector. Karena sisipan yang dimasukan didalam tanda kutip merupakan target yang akan mengarah hanya kepada link yang memiliki url sama.
a[href="http://modification-blog.blogspot.com"] {
color: red;
}Perhatikan contoh CSS diatas. Selector diatas hanya akan berpengaruh pada target tag anchor yang memiliki url http://modification-blog.blogspot.com, sedangkan tag anchor lainnya (yang tidak memiliki url sama) tidak akan dipengaruhi sama sekali.
Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera
(12) X[href*="modif"]
Selector ini hampir mirip dengan selector X[href="foo"], namun selector X[href*="modif"] memiliki target yang lebih luas dan tidak terlalu spesifik.
a[href*="modif"] {
color: red;
}Perhatikan contoh CSS diatas. Selector ini digunakan untuk memberikan style pada tag anchor yang url-nya mengandung kata "modif", misal; blog.modif.com, modif.blog.com, modifblog.com dan atau modification-blog.blogspot.com. Sedangkan tag anchor yang url-nya tidak mengandung kata "modif" tidak akan dipengaruhi sama sekali. Penggunaan simbol bintang didalamnyalah yang membuat selector bersifat lebih luas. Tanpa simbol bintang maka target sangat sempit, bahkan kata "modif" tidak akang mengenai tag anchor apapun.
Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera
(13) X[href^="http"]
Selector ini digunakan untuk memberikan style dengan menggunakan regular expression untuk menentukan kata kunci awal.
a[href^="http"] {
background: url(external/icon.png) no-repeat;
padding-left: 10px;
}Perhatikan contoh CSS diatas. Ini biasanya digunakan untuk menambahkan icon kecil pada tag anchor yang menandakan bahwa url tersebut mengarah keluar (eksternal) dari halaman yang sedang dibuka. Disini kode CSS menggunakan bantuan simbol carat (^) yang biasanya digunakan sebagai regular expression untuk menentukan string awal. String awal yang akan dideteksi dari kode contoh diatas adalah href yang url-nya diawali dengan "http" karena biasanya url halaman internal dari suatu situs tidak disertai "http" sedangkan untuk halaman eksternal harus lengkap dengan penambahan "http" diawal url-nya.
Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera
(14) X[href$=".jpg"]
Selector ini hampir mirip dengan selector X[href^="http"], perbedaannya hanya pada regular expression untuk menentukan string.
a[href$=".jpg"] {
color: red;
}Perhatikan contoh CSS diatas. Kode CSS menggunakan simbol dollar ($), yang merupakan regular expression untuk menentukan string akhir. Maka kode CSS pada contoh diatas hanya akan mempengaruhi tag anchor href yang url-nya mengandung string .jpg pada akhir url-nya. Sedangkan url yang akhiran stringnya bukan .jpg maka tidak akan dipengaruhi sama sekali.
Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera
(15) X[data-*="foo"]
Selector ini merupakan cara lain untuk menentukan type suatu file yang akan dipengaruhi oleh CSS.
a[data-filetype="image"] {
color: red;
}Selector pada nomor 14 biasanya digunakan untuk membuat style berdasarkan type file, misal; untuk memberikan style pada file-file dengan type png, jpg, jpeg, gif maka kita menggunakan multiple selector pada kode CSS seperti dibawah ini:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
Jika menggunakan multiple selector seperti diatas ini tentunya berpengaruh pada setiap tag anchor dengan string akhir sama, lalu bagaimana jika ada diantaranya tag anchor yang tidak ingin dipengaruhi CSS? Solusinya dengan menggunakan custom attribute. Kita dapat menambahkan sendiri atribut data-filetype pada masing-masing tag anchor yang mengandung link sebuah gambar, seperti dibawah ini:
<a href="path/image.jpg" data-filetype="image">Image Link</a>
<a href="path/image.png" data-filetype="image">Image Link</a>
Setelah pengaitnya (custom attribute) diletakan pada tag anchor, kita dapat dengan mudah menuliskan atribut tersebut pada CSS agar target menjadi spesifik yang mengarah pada tag anchor tertentu, seperti dibawah ini:
a[data-filetype="image"] {
color: red;
}
Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera
(16) X[foo~="bar"]
Selector ini menggunakan penambahan simbol tilda (~) yang digunakan untuk mentargetkan style pada atribut elemen yang memiliki spasi (space) value (nilai).
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}Perhatikan contoh CSS diatas. Kita telah mendeklarasikan 2 selector dengan nilai berbeda, yaitu external dan image. Misal elemen yang dipengaruhi CSS tersebut seperti dibawah ini:
<a href="path/to/image.jpg" data-info="external image">Gambar Eksternal</a>
Pada contoh elemen diatas, kita telah membuat atribut data-info dengan 2 nilai, yaitu external dan image. Dua nilai atribut ini memberikan keleluasaan bagi kita untuk menentukan style yang tepat dan lebih fleksibel dari pada hanya dengan satu nilai. Dua nilai pada atribut ini hanya dipisahkan dengan spasi kosong seperti halnya penggunaan selector class.
Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera
(17) X:checked
Pseudo class ini digunakan untuk memberikan style input yang terpilih (checked) seperti tombol radio atau checkbox.
input[type=radio]:checked {
border: 1px solid black;
}Selector ini bekerja pada browser: IE9+ - Firefox - Chrome - Safari - Opera
(18) X:hover
Selector ini mungkin sangat familiar bagi anda, karena memang selector yang sering digunakan, namun pada mulanya hanya digunakan pada tag anchor saja. Sekarang :hover bisa digunakan pada berbagai elemen. Istilah resmi untuk selector ini adalah user action pseudo class.
div:hover {
background: #e3e3e3;
}Perhatikan kode CSS diatas. Selector :hover tidak digunakan pada tag anchor tetapi digunakan pada sebuah elemen div. Hati-hati menggunakan selector :hover karena Internet Explorer versi lama tidak akan memberikan perubahan apapun dalam penggunaan :hover pseudo class ini dan hanya berlaku pada tag anchor saja. Contoh dibawah ini adalah :hover pseudo class pada tag anchor yang akan memberikan style garis bawah dengan warna hijau (green) pada saat pointer mouse berada diatas tag anchor.
a:hover {
border-bottom: 1px solid green;
}Para web desainer menyarankan penggunaan border-bottom: 1px solid #000; untuk garis bawah sebuah tag anchor dari pada menggunakan text-decoration: underline;
Selector ini bekerja pada browser: IE6+ (tapi hanya pada elemen tag anchor) - Firefox - Chrome - Safari - Opera
(19) X:after
Selector :before dan :after pseudo class sangat berguna sekali dan sering digunakan. Setiap hari, banyak para web desainer kreatif melakukan percobaan untuk menemukan cara baru yang lebih efektif. Salah satu teknik :after pseudo class yang sangat terkenal adalah clear-fix hack seperti kode dibawah ini:
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}Penggunaan hack :after pseudo class ini untuk menyisipkan sebuah spasi (ruang kosong) setelah elemen sebelumnya.
Selector ini bekerja pada browser: IE8+ - Firefox - Chrome - Safari - Opera
(20) X:not(selector)
Selector ini disebut negation pseudo class yang digunakan sebagai pengingkaran (negation) terhadap suatu kondisi.
div:not(#container) {
color: blue;
}Perhatikan kode CSS diatas. Jika kita baca maka kurang lebih berbunyi; jika elemen div bukan (atau tidak memiliki) id container maka huruf akan diberi warna biru (blue).
Atau kita ingin memilih setiap elemen namun bukan paragraph dengan huruf diberi warna hijau (green) maka kode CSS ditulis seperti dibawah ini:
*:not(p) {
color: green;
}Jika dibaca kurang lebih berbunyi; semua elemen (*) huruf akan diberi warna hijau (green) kecuali huruf yang berada didalam paragrap (tag p).
Selector ini bekerja pada browser: IE9+ - Firefox - Chrome - Safari - Opera
Kesimpulan
Bertambah 10 selector dalam memori kita dan selector-nya pun semakin lumayan rumit untuk dipahami dan dihapal. Namun jika kita terus melakukan trial and error, perlahan tapi pasti selector diatas akan mampu diingat dan dipahami dengan baik. Penggunaan kode-kode CSS terutama selector tidak hanya cukup untuk dibaca, kita harus benar-benar mencobanya sendiri agar paham perubahan demi perubahan yang terjadi pada elemen-elemen HTML yang kita tulis. Lakukan eksplorasi lebih jauh dengan mengikuti imajinasi kita agar muncul permasalahan-permasalahan yang harus dipecahkan, semakin sering menemukan masalah semakin paham fungsi dari masing-masing selector diatas. Lakukan pula pengkombinasian selector hingga terjadi bentrok disana-sini, maka ketika kita mampu melakukan perbaikan bentrok, semakin baik pula pemahaman kita.
Ingat! Mengerti belum tentu memahami, karena mengerti saja belum cukup untuk menyelesaikan permasalahan-permasalahan yang timbul. Tulis dan terus tulis kode demi kode hingga kita benar-benar memahaminya.
know:not(#understand){
error: rewrite;
often: successful;
}Sampai ketemu dipembahasan berikutnya. Selamat belajar dan selamat mencoba. Happy Blogging :)
Pranala Luar:
