Belajar CSS Selector

Demi memenuhi permintaansobat @Zh!nTho saya putuskan untuk membuat post ini

Pasti tidak asing bagi kalian apa itu selector, saya pernah menjelaskan selector sedikit di Bab I : Perkenalan CSS tapi meskipun tidak sebanyak yang akan saya bahas sekarang.
 
Untuk mengingat kembali apa itu selector , saya akan beri contoh sedikit:

Silahkan lihat tulisan yang di beri warna merah, itu adalah contoh dari selektor :

.page-wrap{width:880px;margin:0 auto;}
#content-wrapper{background:#c22400; margin: auto;float:center}
#content-wrapper:hover{background:#FFA500;}
#main-wrapper{margin: auto;background:#ddd;float:center;overflow:hidden;width:700px;word-wrap:break-word;}

Sudah ingat kan sekarang baik sekarang kalian lihat macam-macam selektor di bawah ini :

Selector	Example	Example description	CSS
.class	.page-wrap	Memilih element kelas page-wrap	1
#id	#content-wrapper	Memilih element id content-wrapper	1
*	*	Memilih semua element	2
element	p	Memilih element <p>	1
element,element	div,p	Memilih element <div> dengan <p>	1
element element	div p	Memilih element <p> yang ada didalam element <div>	1
element>element	div>p	Memilih element <p> dimana induknya ada di element <div>	2
element+element	div+p	Memilih element <p> yang ditempatkan sesudah <div>	2
[attribute]	[target]	Memilih element dengan atribut target	2
[attribute=value]	[target=_blank]	Memilih element dengan targetnya yaitu _blank	2
[attribute~=value]	[title~=flower]	Memilih semua element dengan judul flower	2
[attribute|=language]	[lang|=en]	Memilih semua element dengan atribut lang yang di awali dengan en	2
:link	a:link	Memilih semua link yang tidak di kunjungi	1
:visited	a:visited	Memilih semua link yang sedang di kunjungi	1
:active	a:active	Memilih semua link yang sedang di aktifkan	1
:hover	a:hover	Memilih link yang sedang di sorot	1
:focus	input:focus	Memilih elementinput yang sedang di fokuskan	2
:first-letter	p:first-letter	Memilih huruf pertama pada element <p>	1
:first-line	p:first-line	Memilih baris pertama pada element <p>	1
:first-child	p:first-child	Memilih setiap element <p> pertama dari induknya	2
:before	p:before	Memasukan konten "before" pada setiap element <p>	2
:after	p:after	Memasukan konten "after" pada setiap element <p>	2
:lang(language)	p:lang(it)	Memilih setiap element <p> dengan atribut lang di mulai dengan "it"	2
element1~element2	p~ul	Memilih setiap element ul yang di dahului oleh element <p>	3
[attribute^=value]	a[src^="https"]	Memilih setiap element a yang di awali dengan https	3
[attribute$=value]	a[src$=".pdf"]	Memilih setiap element a yang di akhiri dengan .pdf	3
[attribute*=value]	a[src*="farkryzer"]	Memilih setiap element a yang mengandung kata "farkryzer"	3
:first-of-type	p:first-of-type	Memilih setiap element p yang element p pertama dari induknya	3
:last-of-type	p:last-of-type	Memilih setiap element p yang element p terakhir dari induknya	3
:only-of-type	p:only-of-type	Memilih setiap element p yang hanya element p dari induknya	3
:only-child	p:only-child	Memilih setiap element p yang hanya anak element p dari induknya	3
:nth-child(n)	p:nth-child(2)	Memilih setiap element p yang hanya anak kedua element p dari induknya	3
:nth-last-child(n)	p:nth-last-child(2)	Memilih setiap element p yang hanya anak kedua dari induknya, termasuk anak yang terakhir	3
:nth-of-type(n)	p:nth-of-type(2)	Memilih setiap element p yang hanya element p kedua dari induknya	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Memilih setiap element p yang hanya element p kedua dari induknya, termasuk anak yang terakhir	3
:last-child	p:last-child	Memilih semua element terakhir pada element p	3
:root	:root	Memilih element dokumen root	3
:empty	p:empty	Memilih setiap element p yang tidak memiliki anak (termasuk node teks)	3
:target	#news:target	Memilih element #news yang masih aktif Selects the current active #news element	3
:enabled	input:enabled	Memilih semua element input di aktifkan	3
:disabled	input:disabled	Memilih semua element input di nonaktifkan	3
:checked	input:checked	Memilih semua element input di periksa	3
:not(selector)	:not(p)	Memilih setiap elemen yang bukan elemen p	3
::selection	::selection	Memilih bagian dari elemen yang dipilih oleh pengguna	3

Untuk lihat contohnya silahkan menuju situs aslinya di >>> W3SCHOOLS 

klik linknya selector yang ingin di coba