CSS Pseudo-class

Apa itu Pseudo-class? Dengan menggunakan pseudo-class kita bisa mengambil suatu element secara spesifik dengan parameter tertentu, tanpa element tersebut diberi id atau class.

Misal, untuk memilih element <p> maka selektornya p {}. Nah, kalau memilih <p> yang terakhir gimana? Jika dalam satu web ada 30 <p>.

Inilah fungsinya menggunakan pseudo-class css. Kita bisa milih <p> pertama, terakhir atau <p> kedua, ketiga, dll.

Syntax

Untuk mendefinisikan pseudo-class setiap selektor ditambah titik dua (:).

selektor:psudo-class {property: value}

Pseudo-classes Anchor

Yang paling banyak digunakan adalah selektor pseudo-class untuk anchor. Gak sadar? Yang termasuk anchor pseudo-class adalah:

a:link {color:red}
a:visited {color:blue}
a:hover {color:yellow}
a:active {color:green}
a:focus {collor:pink}

Anchor itu tag link html, a itu Ancor dalam <a>. Keterangannya:

• :link memilih setiap a yang ada linknya
• :visited memilih setiap a yang ada link tapi udah diklik
• :hover memberi efek ketika a didekati cursor
• :active memilih setiap a yang sedang dibuka
• :focus memilih ketika keyboard fokus mengarah ke a

:first-child

Ini digunakan untuk memilih setiap element yang pertama dipanggil. Misal ada dua puluh paragraf <p>, dan hanya dipilih <p> pertama aja.

p:first-child { color:red; }

:last-child

Digunakan untuk memilih setiap element yang terakhir dipanggil. Misal ada tiga puluh <b>, maka hanya memanggil <b> terakhir.

b:last-child { color:red; }

:nth-child

Nah ini makin kompleks lagi, dengan :nth-child. Ada beberapa aturan penulisannya.

Huruf n disini artinya uratan, th itu dalam bahasa inggris menandakan urutan, misal: 1 (first), 2 (second), 3 (third), 4 (fourth), 5 (fifth), dst.

Untuk memilih element <p> urutan kedua:

p:nth-child(2) {color:red }

Kalau untuk ganjil genap? Nah, disini logika harus mulai jalan. Definisi bilangan genap adalah bilangan yang kelipatan 2. Ini definisi matematika paling sederhana ya.

Jadi pseudo-classnya untuk genap adalah:

p:nth-child(2n) {color:red }

Gunakan 2n untuk memilih element urutan kelipatan 2, kalau kelipatan 3 tinggal 3n, 4n, dst.

Sampai sini clear ya paham?

Biar makin keren, kamu juga bisa nambah dengan 3n+1, artinya setiap urutan kelipatan 3 ditambah 1. Misal n=2, maka (3×2)+1 = 6+1 = 7. Jadi urutan ketujuh, dst.

:lang

Pseudo-class untuk memilih element yang mengandung atribut bahasa lang="". Contoh memilih element <b> yang ada value lang no

b:lang(no) {color:red}

Kode HTMLnya:

<p> contoh <b lang="no">yang ada lang</b></p>

Lang ini mendefinisikan bahasa, misal kalau indonesia lang="id", kalau inggris lang="en".

Selector pseudo-class

Berikut ini adalah daftar selektor yang termasuk pseudo-class:

Pseudo-class	Contoh	Keteranga
:not(selector)	:not(b)	Pilih element bukan b
:target	#berita:target	Pilih menu yang sedang aktif dengan id #berita
:active	a:active	Pilih link aktif
:hover	a:hover	Pilih ketika link dihover / cursor diarahin
:link	a:link	Pilih setiap link yang belum diklik
:visited	a:visited	Pilih setiap link yang sudah diklik
:checked	input:checked	Pilih setiap <input> yang dicentang
:disabled	input:disabled	Pilih setiap <input> yang didisable (tidak aktif)
:enabled	input:enabled	Pilih setiap <input> yang dienable (aktif)
:focus	input:focus	Pilih setiap <input> yang disetting focus
:in-range	input:in-range	Pilih setiap <input> yang valuenya punya range spesifik
:invalid	input:invalid	Pilih setiap <input> yang invalid
:optional	input:optional	Pilih setiap <input> yang tidak wajib diisi
:out-of-range	input:out-of-range	Pilih setiap <input> yang value melibihi batas range
:read-only	input:read-only	Pilih setiap <input> yang hanya readonly
:read-write	input:read-write	Pilih setiap <input> yang bukan read only
:required	input:required	Pilih setiap <input> yang required (wajib diisi)
:valid	input:valid	Pilih setiap <input> yang valid
:empty	p:empty	Pilih <p> yang tidak punya child
:first-child	p:first-child	Pilih <p> yang pertama
:first-of-type	p:first-of-type	Pilih <p> jika <p> adalah element pertama
:lang(language)	p:lang(it)	Pilih <p> yang ada atribut bahasa lang=”it”
:last-child	p:last-child	Pilih <p> yang terakhir
:last-of-type	p:last-of-type	Pilih <p> dimana <p> adalah element terakhir
:nth-child(n)	p:nth-child(2)	Pilih <p> yang kedua
:nth-last-child(n)	p:nth-last-child(2)	Pilih <p> kedua dari bawah
:nth-last-of-type(n)	p:nth-last-of-type(2)	Pilih <p> kedua dari bawah jika <p> adalah element terakhir
:nth-of-type(n)	p:nth-of-type(2)	Pilih <p> jika <p> element kedua dari parent
:only-child	p:only-child	Pilih <p> dimana <p> sat-satunya child dari parent
:only-of-type	p:only-of-type	Pilih <p> dimana <p> satu-satunya <p> dari parent
:root	root	Pilih element root dokumen

Jika masih bingung silahkan baca di w3school.