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.
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:
