Mengenal CSS3 Selector

Saat ini CSS3 hanya dapat digunakan pada web browser terbaru. Seperti Safari 4.0, Opera 10 dan Firefox 3.5, Google Chrome 3.0. Sayangnya Internet Explorer 8 belum mengimplementasikan CSS3 ini.

Untuk contoh CSS dibawah, kita menggunakan HTML:

<ul>
<li>Ganjil - 1</li>
<li>Genap - 2</li>
<li>Ganjil - 3</li>
<li>Genap - 4</li>
<li>Ganjil - 5</li>
</ul>

Elemen Ganjil dan Genap

li:nth-child(odd) { color: blue; }
li:nth-child(even) { color: green; }

Code diatas digunakan untuk memilih tag li yang ganjil dan genap.

Setiap Elemen Ketiga

li:nth-child(3n) { color: orange; }

Code diatas digunakan untuk membuat warna pada baris ketiga dan kelipatannya.

Elemen Tertentu

li:nth-of-type(3) { color: orange; }
li:nth-child(5) { color: red; }

Selector hanya memilih baris ketiga dan kelima.

Elemen Pertama dan Terakhir

Elemen Pertama

li:first-of-type { color: blue; margin-left: 15px; }

Elemen Terakhir

li:last-of-type { color: green; margin-left: 15px; }

Dua Elemen Pertama

li:nth-child(-n+2) { color: green; margin-left: 15px; }

Dua Terakhir

li:nth-last-child(-n+2) { color: green; margin-left: 15px; }

CSS3 membuat tugas anda menjadi lebih mudah. Sayangnya belum semua web browser mengimplementasikannya saat ini. Harapannya semoga semua pengguna web browser meng-update web browser mereka. Agar apa yang ingin ditampilkan oleh web developer sesuai dengan yang dilihat end-user.

References: http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/

Blogged with the Flock Browser