CSS SELECTOR

IE6+ IE7+ IE8+ IE9+ Firefox Chrome Safari Opera

No Selector
1 *

Contoh
*{...}

Fungsi
simbol ini akan memberi efek pada setiap single element pada halaman. Digunakan untuk memberikan nilai nol untuk margin dan padding. Tidak disarankan karena akan memberikan beban kepada browser memberikan prefix tanda pagar pada selector akan memberikan efek pada id memberikan prefix tanda titik pada selector akan memberikan efek pada class. Perbedaan antara id dan class ada pada faktor penggunaan element. Dengan menggunakan prefix class penggunaan styling dapat dilakukan pada banyak element. pola ini disebut dengan descendant selector. Pola ini digunakan untuk membatasi styling pada elemen element bertingkat kedalam. pola ini akan memberikan efek individu terhadap elemen kita menggunakan :link pseudo-class untuk menarget semua anchor yang akan diklik dan kita menggunakan :visited untuk memberikan styling pada anchor tags pada halaman yang telah di klik atau dikunjungi selector ini digunakan sebagai adjacent selector. Selector ini akan melakukan seleksi hanya pada element yang didahului oleh element yang sebelumnya. selector ini identik dengan X Y namun mempunyai fungsi yang berkelanjutan untuk element yang didalamnya sibling combinator ini mirip dengan x + y namun lebih selektif. Saat sebuah adjacency selector (ul + p) hanya akan menggunakan element pertama yang didahului oleh former selector, sibling combinator ini mempunyai sifat yang lebih umum. Sebagai contoh setiap element p akan dipilih sejauh diikuti oleh ul. cara ini hanya akan memberikan seleksi terhadap anchor tag yang mempunyai atribut tittle snippet tersebut akan memberikan style kepada semua anchir tags yang mempunyai link ke http://tutopod.com tanda bintang akan melakukan proses yang lebih umum dan berlaku pada setiap elemen yang menyerupai seperti tutopod.com,tutograph.com, dan lainnya tanda ini digunakan untuk menandai style dengan tipe link dengan setiap link diawali oleh atribut href yang diberikan. Hal ini terkadang digunakan oleh website agar dapat membedakan antara internal link dan external link. Dimana setiap external link selalu diikuti oleh http:// cara ini digunakan untuk merepresentasikan akhir dari string. Dalam kasus ini, kita mencari semua anchor yang melakukan link terhadap image -- atau setidaknya pada setiap url yang diakhiri oleh extensi tertentu. Cara ini tidak dapat bekerja pada gifs dan png seperti sebelumnya, jika ingin melakukan filter pada extensi kita dapat menggunakan $ namun akan menyulitkan jika kita ingin melakukan seleksi style pada link yang merujuk pada tipe file yang sama namun dengan extensi yang bermacam-maca, contoh : .jpg, .JPEG, .TIFF, .png, .gif. kita dapat menggunakan ini untuk menjembatani dengan mendeskripsikan sebagati data-filetype=image pada selector cara ini identik dengan no. 15 namun penggunaan tilda memberikan kemudahan untuk tag atribute yang mempunyai nilai yang dipisahkan oleh spasi, seperti contoh, selector tersebut akan bekerja pada situasi <a href="path/to/image.jpg" data-info="external image"> pseudo class ini digunakan untuk elemen yang dapat di cek(centang) dan telah tercentang seperti radio button atau checkbox pseudo class ini lebih banyak digunakan untuk menerapkan clear-fix hack. negasi pseudo class digunakan untuk memberikan negasi terhadap element yang dilakukan eksepsi. Seperti pada contoh, semua element div yang tidak mempunyai selector id container akan dibawahi oleh style tersebut kita dapat menggunakan pseudo element (ditandai dengan ::) untuk memberikan style terhadap fragment dari sebuah elemen, seperti halnya baris pertama (first-line) atau huruf pertama (first-letter) dengan menggunakan pseudo ini kita dapat memilih child element dari element utama dengan berdasarkan urutan (n) bayangkan sebuah mark-up yang didalamnya berisi lime unordered list. Jika ingin menerapkan style hanya pada ul ketiga dan tidak ada id unik, maka cara menggunakan nth-of-type(n) dapat digunakan kita dapat menggunakan nth-last-of-type untuk memulai pada akhir selector list dan mengerjakan kembali elemen yang diinginkan. pseudo class seperti ini memberikan kemudahan dalam melakukan selekse pada elemen pertama pada list atau element parent. Akan sering kita gunakan untuk menghilangkan border pada item pertama dan terakhir dan menciptakan pola yang biasa disebut odd. merupakan lawan penggunaan dari first-child pseudo class ini hanya akan bekerja jika pada elemen terdapat hanya satu child

2 #x 3 .X

#container{...} .error{...}

4 XY 5 X 6 x:visited and x:link

li a{...} a{...} ul{...} a:link{...} a:visited{...}

7 X+Y 8 X>Y 9 X~Y

ul + p {...} div#container > ul {...} ul ~ p {...}

10 X[title] 11 X[href="foo"] 12 X[href*="tutopod"] 13 X[href^="http"]

a[title]{...} a[href="http://tutopod.com"]{... } a[href*="tuto"] a[href^="http"]{...}

14 X[href$=".jpg"]

a[href$=".jpg"]{...}

15 X[data-*="foo"]

a[data-filetype="image"]{...}

16 X[foo~="bar"]

a[data-info~="external"]{...} a[data-info~="image"]{...}

17 X:checked 18 X:after 19 X:hover 20 X:not(selector)

input[type=radio]:checked{...} .clearfix:after{...} .clearfix{...} div:hover{...} div:not(#container){...}

21 X::pseudoElement

p::first-line{...}

22 X:nth-child(n) 23 24 X:nth-of-type(n)

li::nth-child(3){..}

ul:nth-of-type(3)

25 X:nth-last-of-type(n) 26 X:first-child

ul:nth-last-of-type(3) {...} ul li:first-child{...}

27 X:last-child 28 X:only-child 29 X:only-of-type 30

ul > li:last-child{...} div p:only-child{...} li:only-of-type{...}