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-classContohKeteranga
:not(selector):not(b)Pilih element bukan b
:target#berita:targetPilih menu yang sedang aktif dengan id #berita
:activea:activePilih link aktif
:hovera:hoverPilih ketika link dihover / cursor diarahin
:linka:linkPilih setiap link yang belum diklik
:visiteda:visitedPilih setiap link yang sudah diklik
:checkedinput:checkedPilih setiap <input> yang dicentang
:disabledinput:disabledPilih setiap <input> yang didisable (tidak aktif)
:enabledinput:enabledPilih setiap <input> yang dienable (aktif)
:focusinput:focusPilih setiap <input> yang disetting focus
:in-rangeinput:in-rangePilih setiap <input> yang valuenya punya range spesifik
:invalidinput:invalidPilih setiap <input> yang invalid
:optionalinput:optionalPilih setiap <input> yang tidak wajib diisi
:out-of-rangeinput:out-of-rangePilih setiap <input> yang value melibihi batas range
:read-onlyinput:read-onlyPilih setiap <input> yang hanya readonly
:read-writeinput:read-writePilih setiap <input> yang bukan read only
:requiredinput:requiredPilih setiap <input> yang required (wajib diisi)
:validinput:validPilih setiap <input> yang valid
:emptyp:emptyPilih <p> yang tidak punya child
:first-childp:first-childPilih <p> yang pertama
:first-of-typep:first-of-typePilih <p> jika <p> adalah element pertama
:lang(language)p:lang(it)Pilih <p> yang ada atribut bahasa lang=”it”
:last-childp:last-childPilih <p> yang terakhir
:last-of-typep:last-of-typePilih <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-childp:only-childPilih <p> dimana <p> sat-satunya child dari parent
:only-of-typep:only-of-typePilih <p> dimana <p> satu-satunya <p> dari parent
:rootrootPilih element root dokumen

Jika masih bingung silahkan baca di w3school.

Leave a Comment