Memahami CSS Selector - Bagian Hendriono Kamis, Agustus 02, 202 (X)HTML, CSS 8 komentar Bismillah. Alhamdulillah. Perkembangan bahasa markup Cascading Style Sheet (CSS) cukuplah pesat dan ini membuat tampilan situs menjadi semakin dinamis. Pada awal perkembangannya, bahasa CSS masih termasuk kaku, namun kini para web desainer mampu menciptakan efek-efek yang mengesankan hanya dengan CSS. Ini tentunya seiring dengan ide-ide yang terus berkembang, kebutuhan akan situs yang sederhana namun tetap menarik dan banyak lagi faktor lain yang membuat bahasa markup CSS semakin hebat. Para developer browser pun dipaksa untuk mengikuti perkembangan bahasa markup ini, atau bahkan para developer browser-lah yang memancing perkembangan bahasa markup yang satu ini. Ini tentunya berimbas pada pertambahan kosakata yang digunakan pada bahasa markup CSS, dan bagi para pecinta desain layout situs tentunya juga harus menyediakan memori ekstra untuk menghafal lebih banyak kosakata. Salah satu dari sekian banyak pertambahan kosakata bahasa markup CSS adalah fungsi selector (pemilih). Mungkin dulu kita hanya mengenal selektor id, class dan descendant (turunan), namun hari ini, ketika CSS memasuki versi 3 (atau sering dikenal CSS3) semakin bertambah pula fungsi-fungsi selektor yang digunakan dalam mendesain situs. Dalam penggunaannya pun, para desainer web dituntut berhati-hati karena penggunaan versi terbaru bahasa markup harus pula diikuti dengan penggunaan browser versi baru, hal ini karena penggunaan fungsi baru bisa saja tidak mampu bekerja baik pada browser lama terutama browser IE :( Sebuah konsekwensi dari perkembangan dan perubahan... Dibawah ini akan dibahas selektor yang paling banyak digunakan dan harus diingat dengan baik oleh para desainer web. Untuk memahami dengan baik fungsi dari masing-masing selector, lebih baik anda unduh terlebih dahulu contoh penggunaannya pada link dibawah ini, ekstrak dengan perangkat lunak ekstraktor (misal; 7ZIP, WinZIP atau WinRAR) kemudian buka masing-masing contoh pada browser. () * Sebelum membahas jenis selector lainnya maka selector yang satu ini harus dipahami dengan baik terutama bagi anda yang baru memulai belajar tentang bahasa CSS. Selector dengan simbol bintang (atau sering disebut asterik) akan mengarahkan target pada semua elemen tunggal didalam halaman.
* { 2 margin: 0; 3 padding: 0; 4 Para web desainer biasanya menggunakan selector ini untuk me-reset atau mengkosongkan margin dan padding. Selector ini sangat bermanfaat untuk menyamakan posisi margin dan padding pada berbagai penampilan browser. Namun hati-hati dalam penggunaannya, karena terlalu sering menggunakan selector ini akan menambah beban load halaman pada browser. Selector * juga bisa digunakan pada child (anak) dari selector lain, misal: #container * { 2 border: px solid black; Maka selector ini akan mengarah pada target elemen tunggal dari semua child div #container. Namun ingat juga, jangan terlalu sering menggunakannya. Selector ini bekerja pada browser: IE+ - Firefox - Chrome - Safari - Opera (2) #X Simbol # (id) sering disebut hash. Selector dengan prefix hash digunakan untuk pentargetan sesuai dengan ID pada halaman. Dalam penggunaannya sangatlah sederhana, karena kita hanya perlu menentukan target sesuai dengan ID yang digunakan pada halaman. 2 3 4 #container { width: 90px; margin: auto; border: px solid #222; background-color: #CCCCCC; Selector # bersifat tetap atau kaku karena hanya boleh digunakan pada satu target ID dan tidak boleh digunakan lagi. Selector ini bekerja pada browser: IE+ - Firefox - Chrome - Safari - Opera (3).X Simbol. sering disebut class. Dalam penggunaannya hampir sama dengan selector id, namun selector class diperbolehkan untuk digunakan secara berulang pada berbagai elemen halaman dan dapat digunakan secara bersamaan (multiple) dengan selector class lainnya..error { 4.warning { border: px solid #222;
Dalam penerapannya, kita bisa menggabungkannya dengan selector id untuk pentargetan yang lebih spesifik, bahkan bisa saja memiliki class yang sama namun digunakan dalam style yang lebih spesifik. Contoh penggambungan selector id dengan selector class: #container.error { 4#container.warning { border: px solid #222; Penggabungan dua selector diatas hanya akan memberikan style pada target elemen yang lebih spesifik. Selector ini bekerja pada browser: IE+ - Firefox - Chrome - Safari - Opera (4) X Y Selector ini sering disebut selector descendant (turunan). Selector ini digunakan untuk menentukan style target yang lebih spesifik. li a { 2 text-decoration: none; Perhatikan CSS diatas. Selector diatas digunakan untuk memberikan style pada semua tag anchor yang berada didalam unordered list (daftar urutan yang biasanya menggunakan tag li). Sedangkan tag anchor yang berada diluar unordered list tidak akan dipengaruhi sama sekali. Bagaimana jika kita menuliskannya X Y Z A B.error? maka penulisan seperti ini adalah salah. Hindari penggunaan metode seperti ini, kita akan lebih baik dengan menentukan selector descendant atau turunan yang paling dekat. Selector ini bekerja pada browser: IE+ - Firefox - Chrome - Safari - Opera () X Selector tunggal umum yang digunakan untuk memberikan style pada target elemen dengan type tertentu tanpa penggunaan id atau class. a { 4ul { margin-left: 0; Contoh CSS diatas akan memberikan target style pada semua tag anchor dan unordered list. Namun, jika ada style lain yang ditulis lebih spesifik maka kesamaan property yang ada pada style diatas akan dinonaktifkan. a { color: red; 2
3li a { 4 color: blue; Style CSS diatas akan menghasilkan warna tag anchor blue untuk tag anchor yang berada didalam unordered list, dan akan menghasilkan warna tag anchor red pada semua tag anchor yang berada diluar unordered list. Selector ini bekerja pada browser: IE+ - Firefox - Chrome - Safari - Opera () X:visited dan X:link Selector ini sudah termasuk ke dalam pseudo-class, yang merupakan salah satu perkembangan bahasa CSS. Sehingga pada browser lawas, penggunaan pseudo-class tidak akan berpengaruh apa-apa terutama pada browser lawas IE+ :(. a:link { 4a:visited { color: blue; Pengguaan selector pseudo-class :link akan memberikan style pada semua tag anchor yang bisa diklik (memiliki target URL). Sedangkan penggunaan selector pseudo-class :visited hanya akan memberikan style pada tag anchor yang pernah di klik dan atau pernah dikunjungi (visited). (7) X + Y Selector ini biasa disebut adjacent selector, yang digunakan untuk memberikan style pada elemen yang terdekat atau berdekatan. ul + p { Pada contoh CSS diatas, style hanya akan diterapkan hanya pada paragrap pertama yang ditempatkan setelah ul namun p bukanlah child dari ul. Sedangkan paragrap kedua dan seterus tidak akan terpengaruhi style ini. (8) X > Y Selector ini biasa disebut direct selector, yang digunakan untuk memberikan style pada elemen yang ditargetkan langsung. #container > ul { border: px solid black; 2
3 Pada contoh CSS diatas, style hanya akan diterapkan pada ul yang merupakan child langsung (atau child pertama) yang ditempatkan setelah div #container. Sedangkan ul lain (child kedua, ketiga dan seterusnya) tidak akan dipengaruhi walaupun masih berada didalam div #container. Selector X > Y hampir mirip dengan selector X Y, perbedaan hanya pada target. Jika selector X Y akan berpengaruh pada semua target elemen yang ada didalamnya, sedangkan selector X > Y hanya berpengaruh pada child pertama saja. (9) X ~ Y Selector ini sering disebut sibling combinator yang hampir mirip dengan selector X + Y. Perbedaannya ada pada target, jika X + Y hanya memiliki target pada elemen pertama yang ditempatkan setelahnya, sedangkan X ~ Y akan berpengaruh pada semua target elemen yang ditempatkan setelahnya. ul ~ p { Pada contoh CSS diatas, style akan diterapkan pada semua paragrap yang ditempatkan setelah elemen ul, namun p bukanlah child dari ul. p berada tepat dibawah elemen ul. (0) X[title] Selector ini disebut attributes selector yang digunakan untuk memberikan style pada elemen yang memiliki attribut title saja. a[title] { 2 color: green; Pada contoh CSS diatas, style hanya akan mempengaruhi tag achor yang memiliki atribut title saja, sedangkan tag anchor yang tidak memiliki atribut title tidak akan dipengaruhi. Kesimpulan Selector yang dibahas diatas adalah selector dasar yang harus diingat dengan baik, karena kita akan sering bertemu dengan selector ini. Disini diperlukan kemampuan eksplorasi dan imajinasi untuk bisa mengkombinasikan dan menggunakan berbagai selector yang sudah dibahas diatas. Sangat membingungkan jika kita baru saja berkenalan dengan selector ini, namun jangan lelah untuk melalukan trial and error agar kita dapat menemukan fungsi spesifik dari masing-masing selector. Semua kembali pada kemampuan kita untuk bisa membedakan fungsi dari masingmasing selector. Janganlah lelah untuk mencoba...
Sampai ketemu dipembahasan berikutnya. Selamat belajar dan selamat mencoba. Happy Blogging :) Pranala Luar: The 30 CSS Selectors you Must Memorize - NetTuts+ CSS Selector - W3 CSS Selector - W3Schools