Friday, August 10, 2012

Memahami CSS Selector - Bagian 3

Posted by dav On 6:35 AM
Bismillah. Alhamdulillah. Dua artikel yang khusus membahas CSS Selector telah ditulis dengan harapan kita bersama bisa mempelajarinya dengan baik. Dan mudah-mudahan dapat memberikan gambaran serta memecahkan permasalahan-permasalahan yang berhubungan dengan CSS selama ini. Saya menulis artikel tentang CSS Selector bukan bermaksud menggurui sahabat blogger, tapi pada mulanya dimaksudkan sebagai catatan pribadi, untuk mengingatkan diri sendiri disaat lupa. Maklum saya juga bukanlah blogger profesional yang setiap hari selalu berkutat dengan kode-kode CSS. Semakin jarang bertemu dengan CSS semakin besar kemungkinan lupa.
CSS Selector
Artikel kali ini masih sambungan dari dua artikel sebelumnya yang membahas CSS Selector. CSS Selector yang akan dibahas kali ini cukup lumayan sulit dan rumit, bahkan beberapa kode masih jarang yang menggunakannya namun tidak ada salahnya tetap dibagikan sebagai bahan diskusi. Mari kita pelajari CSS Selector berikutnya, jika anda merasa pusing dan bingung berarti saya pun demikian adanya... (hehehehe...)

Agar pemahaman tentang artikel CSS Selector kali ini menjadi lebih mudah, sebaiknya anda unduh terlebih dahulu contoh study case pada link unduhan diatas, kemudian baca artikel dengan memahami langsung dari contoh yang tersedia. Jangan lupa ekstrak file hasil unduhan dengan perangkat lunak archive extractor (misal; 7ZIP, WinZIP, atau WinRAR).

(21) X::pseudoElement

Kita dapat menggunakan Pseudo Element untuk memberikan style pada bagian-bagian dari suatu elemen, seperti misal; style untuk baris pertama pada sebuah paragrap atau huruf pertama dari sebuah paragrap. Pseudo Element tersusun dari dua titik-dua "::" (two colon).

Pseudo Elemen dengan Target Huruf Pertama Paragrap
Dibawah ini contoh kode CSS yang digunakan untuk memberikan style pada huruf pertama pada sebuah paragrap:
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
Pseudo Elemen pada kode CSS diatas memberikan style pada semua huruf pertama dari setiap paragrap yang terdapat pada halaman yang sedang dibuka. Cara ini biasanya digunakan pada style sebuah halaman koran (newspaper).

Pseudo Elemen dengan Target Baris Pertama Paragrap
Dibawah ini contoh kode CSS yang digunakan untuk memberikan style pada baris pertama pada sebuah paragrap:
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Hampir sama dengan fungsi kode Pseudo Elemen CSS sebelumnya, hanya saja target style ditujukan pada semua baris pertama dari setiap paragrap halaman yang sedang dibuka.
Mengutip dari www.w3.org bahwa:
"Untuk kesesuaian dengan style sheet yang ada, maka semua user agent harus bisa menerima notasi satu titik-dua (one-colon) sebelumnya untuk pseudo elemen yang dimasukan pada CSS level 1 dan level 2 (yaitu, :first-line, :first-letter, :before dan :after). Kompatibilitas ini tidak berlaku untuk pseudo element baru yang diperkenalkan pada spesifikasi ini."
Kenyataannya, user agent pada browser versi terbaru mampu membaca dengan baik notasi satu titik-dua pada pseudo element yang terdapat didalam kode CSS dan dengan otomatis mengubahnya menjadi notasi dua titik-dua (two-colon). Terserah anda, apakah akan menggunakan pseudo element dengan notasi two-colon atau one-colon.

Selector ini bekerja pada browser: IE6+ - Firefox - Chrome - Safari - Opera

(22) X:nth-child(n)

Pseudo Element ini digunakan untuk memberikan style pada anak (child) dari sebuah deret item. Pseudo Element ini sederhananya untuk menyeleksi suatu deret item yang tersedia didalam sebuah susunan daftar dengan penghitungan item dimulai dari atas.
li:nth-child(2) {
color: red;
}
Perhatikan kode CSS diatas. Pseudo Element nth-child(2) digunakan untuk memberikan style pada setiap list item (li) yang berada pada susunan (baris) ke-dua dalam setiap kumpulan list item. Pseudo Element ini juga dapat digunakan untuk menyeleksi atau memberikan style list item dengan cara penentuan kelipatannya. Misal; nth-child(2n), maka item 2, 4, 6, 8, dan seterusnya yang merupakan kelipatan dua akan dipengaruhi oleh style pseudo element. nth-chlid mampu menyeleksi item hingga urutan ke-397 [li:nth-child(397)].

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(23) X:nth-last-child(n)

Pseudo Element ini hampir sama dengan nth-chlid, hanya berbeda cara seleksinya saja. Jika nth-child melakukan seleksi dengan cara mengitung list item dari atas, sedangkan nth-last-child adalah kebalikannya, yaitu melakukan penghitungan list item dari item yang terakhir.
li:nth-last-child(2) {
color: red;
}
Perhatikan kode CSS diatas. Pseudo Element nth-last-child(2) digunakan untuk memberikan style pada setiap list item (li) yang berada pada susunan (baris) ke-dua dari bawah (dari item terakhir) dalam setiap kumpulan list item. Misal; list item terdiri dari 8 baris, maka target pseudo elemen ini adalah list item pada baris ke-7 (jika dihitung dari atas) atau baris ke-2 (jika dihitung dari bawah).

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(24) X:nth-of-type(n)

Pseudo Element ini hampir sama dengan :nth-child hanya saja terdapat perbedaan dalam menentukan targetnya. Jika :nth-child akan mencari target berupa child, jika :nth-of-type akan mencari target berupa type elemen.
ul:nth-of-type(2) {
border: 1px solid black;
}
Perhatikan kode CSS diatas. Anggaplah kita memiliki 5 kumpulan unordered list (ul) yang setiap ul terdiri dari 5 list item (li). Kemudian kita ingin memberikan style berupa garis kotak hanya pada ul ke-dua, dan ul ke-dua ini tidak memiliki ID unik yang terkait antara elemen dengan CSS. Maka kita menggunakan pseudo elemen nth-of-type(2), dan hasilnya hanya ul urutan ke-dua dari ataslah yang akan diberi garis kotak hitam.

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(25) X:nth-last-of-type(n)

Pseudo Element ini hampir sama dengan :nth-of-type hanya berbeda cara menentukan target type-nya saja. Jika nth-of-type menentukan target elemen dengan cara mengitungnya dari atas, sedangkan nth-last-of-type adalah kebalikannya, yaitu melakukan penghitungan target elemen dari elemen yang terakhir.
ul:nth-last-of-type(2) {
border: 1px solid black;
}
Perhatikan kode CSS diatas. Anggaplah kita memiliki 5 kumpulan unordered list (ul) yang setiap ul terdiri dari 5 list item (li). Kemudian kita ingin memberikan style berupa garis kotak hanya pada ul ke-dua (dari bawah) atau ul ke-empat jika dihitung dari atas. Maka kita menggunakan pseudo elemen nth-last-of-type(2), dan hasilnya hanya ul urutan ke-dua (dari bawah) atau ke-empat (dari atas) yang akan diberi garis kotak hitam.

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(26) X:first-child

Pseudo Element ini cukup banyak digunakan oleh para web desainer. Struktur pseudo class ini digunakan untuk menentukan style dengan target child (anak) pertama dari elemen utama (parent).
ul li:first-child {
border-top: none;
}
Perhatikan kode CSS diatas. Anggaplah kita memiliki sekumpulan list item (li) dari sebuah unordered list (ul). Kemudian diberikan style garis pada bagian-atas (border-top) dari masing-masing list item. Namun kita ingin membuang garis-atas (border-top) hanya pada list item urutan ke-satu, maka gunakan :first-child untuk menyeleksinya, kemudian buang garis-atasnya (border-top: none;).

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(27) X:last-child

Pseudo class ini hampir sama dengan :first-child namun berbeda target. Struktur pseudo class ini digunakan untuk menentukan style dengan target child (anak) terakhir dari elemen utama (parent).
li:last-child {
border-bottom: none;
}
Perhatikan kode CSS diatas. Anggaplah kita memiliki sekumpulan list item (li) dari sebuah unordered list (ul). Kemudian diberikan style garis pada bagian-bawah (border-bottom) dari masing-masing list item. Namun kita ingin membuang garis-bawah (border-bottom) hanya pada list item urutan terakhir, maka gunakan :last-child untuk menyeleksinya, kemudian buang garis-bawahnya (border-bottom: none;).
Hati-hati, IE8 mendukung pseudo element :first-child tetapi tidak mendukung pseudo element :last-child.

Selector ini bekerja pada browser: IE9+ - Firefox - Chrome - Safari - Opera

(28) X:only-child

Pseudo class :first-child dan :last-child sudah kita pelajari dan pahami, lalu untuk apa pseudo class :only-child?
div p:only-child {
color: red;
}
Perhatikan kode CSS diatas. Mungkin diantara kita ada yang pernah menemukan masalah ini. Misal; kita ingin memberikan style HANYA pada paragraph pertama yang merupakan child (anak) dari SEBUAH div. Namun, paragrap lainnya dari div lain tidak ingin kita beri style. Jika menggunakan pseudo class :first-child maka setiap paragrap pertama dari setiap div akan diberi style. Sedangkan kita hanya mentargetkan paragrap pertama dari sebuah div. Ini berarti style hanya akan diberlakukan pada paragrap pertama yang merupakan child sebuah div (dari sebuah div hanya terdapat sebuah paragraph), sedangkah div lain yang memiliki paragrap lebih dari satu tidak akan diberi style. Kondisi seperti ini sangat sulit diselesaikan dengan menggunakan pseudo class lain, maka gunakanlah pseudo class :only-child untuk menyelesaikannya.

Selector ini bekerja pada browser: IE9+ - Firefox - Chrome - Safari - Opera

(29) X:only-of-type

Pseudo class ini hampir sama dengan :only-child dan :nth-of-type(n) hanya saja berbeda target. Mungkin bisa dikatakan sebagai perpaduan dari :only-child dan :nth-of-type(n).
li:only-of-type {
font-weight: bold;
}
Perhatikan kode CSS diatas. Sebenarnya sama saja dengan :only-child hanya saja berbeda target. Jika :only-child menentukan target yang merupakan child dari sebuah elemen, sedangkan :only-of-type menentukan target berdasar type. Misal; Kita memiliki dua unordered list (ul), ul pertama hanya terdiri dari satu li (list item) sedangkan ul kedua terdiri dari lima li. Jika anda menggunakan li:only-of-type maka style hanya akan berpengaruh pada target li tunggal dari sebuah ul.

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(30) X:first-of-type

Pseudo element ini mungkin boleh dikatakan sebagai perpaduan dari :first-child dengan :nth-of-type(n). Karena pseudo element ini memiliki target style untuk elemen pertama yang terdekat pada tipenya (jenisnya).
Untuk memahami fungsi pseudo element :first-of-type maka perhatikan skenario HTML dibawah ini:
<div>
<p>Solusi Pseudo Element :first-of-type</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>

<ul>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
</div>
Kita memiliki 2 Unordered List (ul) yang setiap ul terdiri dari 2 list item (li). Dan kita ingin memberikan style pada "List Item 2", maka beberapa solusi pseudo element yang bisa kita gunakan adalah sebagai berikut:

Solusi 1
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
Keterangan:
  • ul:first-of-type digunakan untuk menyeleksi ul pertama sesuai dengan tipenya
  • Notasi > digunakan untuk memilih langsung turunan dari ul:first-of-type (lihat direct selector)
  • li:nth-child(2) digunakan untuk menyeleksi child li ke-dua dihitung dari atas


Solusi 2
p + ul li:last-child {
font-weight: bold;
}
Keterangan:
  • p + ul digunakan untuk menyeleksi ul yang posisinya tepat dibawah p (lihat adjacent selector)
  • li:last-child digunakan untuk menyeleksi li child terakhir


Solusi 3
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
Keterangan:
  • ul:first-of-type digunakan untuk menyeleksi ul pertama sesuai dengan tipe-nya (jenisnya atau kelompoknya)
  • li:nth-last-child(1) digunakan untuk menyeleksi ul terakhir diurutan pertama yang dihitung dari bawah

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

Kesimpulan

Jika terpaksa harus menggunakan dan memperhatikan browser versi lama seperti Internet Explorer Versi 6, maka kita harus berhati-hati dalam menggunakan selector versi baru. Namun jangan sampai hal ini justru menghalangi keinginan anda untuk belajar. Jangan sampai versi browser menurunkan semangat belajar dan membuat kita harus diam, karena hal ini sangat merugikan diri kita sendiri. Untuk memperkecil kesalahan penggunaan selector selalu rujuklah daftar kompatibilitas-browser. Atau, Anda dapat menggunakan script IE9.js buatan Dean Edward agar browser versi lama mampu mendukung selector baru. Dan atau, gunakan framework tertentu agar browser lama mampu me-render CSS Selector baru dengan baik, misal; Modernizr.
Ketika kita harus menuliskan kode berdampingan dengan framework populer, semisal jQuery, usahakan kita menuliskan kode selector CSS3 asli pada sekumpulan kode-kode custom perpustakaan. Hal ini akan membuat susunan kode-kode menjadi lebih cepat untuk diakses (dirender) oleh browser, jika memungkinkan. Usahakan menggunakan parsing asli browser daripada menggunakan parsing buatan sendiri, hal ini akan meningkatkan kinerja kode saat dirender.
Akhirnya, saya secara pribadi berharap, 3 artikel yang membahas tentang CSS Selector ini dapat membantu mempercepat pemahaman anda tentang fungsi dari masing-masing kode tersebut. Sehingga, suatu hari saya bisa bertanya tentang pengalaman anda dalam penggunaan CSS Selector. Jika anda menemukan kasus dari CSS Selector diatas, atau menemukan CSS selector lain dan ingin dibahas pada artikel Blogger Tune-Up, jangan sungkan untuk mengirimkan kritik, saran dan pengetahuan baru kepada penulis. Selamat mencoba, selamat belajar dan semoga berhasil. Happy Blogging :)

Pranala Luar:

Saturday, August 4, 2012

Memahami CSS Selector - Bagian 2

Posted by dav On 10:08 AM
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.
CSS Selector
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:

Thursday, August 2, 2012

Memahami CSS Selector - Bagian 1

Posted by dav On 7:16 AM
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.
CSS Selector
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.

(1) *

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.
* {
margin: 0;
padding: 0;
}
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 * {
border: 1px 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: IE6+ - 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.
#container {
width: 960px;
margin: auto;
border: 1px solid #212121;
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: IE6+ - 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 {
color: red;
}
.warning {
border: 1px solid #212121;
}
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 {
color: red;
}
#container .warning {
border: 1px solid #212121;
}
Penggabungan dua selector diatas hanya akan memberikan style pada target elemen yang lebih spesifik.

Selector ini bekerja pada browser: IE6+ - 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 {
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: IE6+ - Firefox - Chrome - Safari - Opera

(5) X

Selector tunggal umum yang digunakan untuk memberikan style pada target elemen dengan type tertentu tanpa penggunaan id atau class.
a {
color: red;
}
ul {
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;
}
li a {
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: IE6+ - Firefox - Chrome - Safari - Opera

(6) 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 IE6+ :(.
a:link {
color: red;
}
a: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).

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(7) X + Y

Selector ini biasa disebut adjacent selector, yang digunakan untuk memberikan style pada elemen yang terdekat atau berdekatan.
ul + p {
color: red;
}
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.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(8) X > Y

Selector ini biasa disebut direct selector, yang digunakan untuk memberikan style pada elemen yang ditargetkan langsung.
#container > ul {
border: 1px solid black;
}
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.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(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 {
color: red;
}
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.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(10) X[title]

Selector ini disebut attributes selector yang digunakan untuk memberikan style pada elemen yang memiliki attribut title saja.
a[title] {
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.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

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 masing-masing selector. Janganlah lelah untuk mencoba...
Sampai ketemu dipembahasan berikutnya. Selamat belajar dan selamat mencoba. Happy Blogging :)

Pranala Luar: