Pseudo-Class


Pseudo-class adalah sebuah keyword / kata kunci yang ditambahkan di akhir selector, dimulai dengan tanda titik dua “:”. Tujuannya adalah untuk menentukan bahwa kamu ingin menata elemen yang dipilih tersebut ketika dalam keadaan / kondisi tertentu. Misalnya saat kursor sedang mengenai elemen tersebut (:hover), saat elemen tersebut di tekan (:active), saat elemen tersebut di nonaktifkan (:disabled), atau sebuah elemen pertama yang ada pada elemen bersarang (:first-child), dll.

Berikut daftar pseudo-class :

:active

:checked

:default

:dir()

:disabled

:empty

:enabled

:first

:first-child

:first-of-type

:fullscreen

:focus

:focus-within

:hover

:indeterminate

:in-range

:invalid

:lang()

:last-child

:last-of-type

:left

:link

:matches()

:not()

:nth-child()

:nth-last-child()

:nth-last-of-type()

:nth-of-type()

:only-child

:only-of-type

:optional

:out-of-range

:read-only

:read-write

:required

:right

:root

:scope

:target

:valid

:visited

Kita tidak akan membahas satu persatu pseudo-class sekarang, karena kamu mungkin tidak akan membutuhkan semua itu pada awal pembelajaran. Kita akan membahas beberapa point penting pada pseudo-class. Untuk artikel mendatang tentang referensi CSS, saya akan membahas lebih lanjut lagi tentang pseudo-class satu persatu. Kalian hanya perlu fokus untuk beberapa point dari pseudo-class saja untuk awal – awal.

Berikut beberapa pseudo-class yang akan kita bahas :

:hover

Pseudo-class tipe ini berfungsi ketika kursor mengenai elemen yang kamu pilih.

Contoh :

<a href="https://www.macode.web.id" target="_blank">Link MACode</a>
a:hover {
    background-color: red;
    color: red;
}

Output :

Coba kode di MACode-Lab

 

:focus

Mewakili elemen seperti button dan input yang telah menerima fokus (setelah elemen tersebut ditekan / diklik). Fokus akan hilang ketika kita menekan elemen selain elemen yang terkena fokus tersebut.

Contoh :

<button id="tombol">Tekan tombol</button>
<br><br> 
<input type="text" value="Background input akan berubah ketika terkena fokus"/>
#tombol:focus {
    background-color: blue;
    color: white;
}
input:focus {
    background-color: yellow;
}

 

:first-child

Mewakili elemen pertama yang ada pada elemen bersarang.

Contoh :

<div>
    <p class="konten">Ini adalah elemen pertama</p>
    <p class="konten">Ini adalah elemen kedua</p>
</div>
.konten:first-child {
    background-color: yellow;
}

 

:checked

Pseudo-class ini ditujukan untuk elemen input, seperti input tipe checkbox dan radio yang dimana mewakili elemen yang telah diberi tanda / di check.

Contoh :

<input type="checkbox" id="checkbox">
<label for="checkbox">Checkbox</label>
#checkbox:checked {
    outline: 2px solid blue;
}