Pseudo Class adalah keyword yang ditambahkan pada selector untuk mendefinisikan kondisi kondisi tertentu yang terjadi pada sebuah elemen. Kondisi tersebut misalnya pada link adalah saat dikunjungi, saat ada cursor mouse diatasnya atau saat berada dalam kondisi normal.
Dalam CSS ada banyak sekali pseudo class yang bisa dipilih. Untuk menuliskan pseudo class pada sebuah selector elemen kita menggunakan tanda baca titik dua ( :), contoh a :hover adalah menunjukkans selector untuk elemen link (a) saat ada mouse diatasnya (hover).
Cara penulisan pseudo class :
selector:pseudo-class {
property: value;
}
Contoh penggunaan pseudo class untuk elemen a :
/* link belum dikunjungi*/
a:link {
color: #FF0000;
}
/* link sudah dikunjungi */
a:visited {
color: #00FF00;
}
/* ada cursor mouse diatas link */
a:hover {
color: #FF00FF;
}
/* link yang terpilih */
a:active {
color: #0000FF;
}
Berikut ini beberapa pseudo class dan penjelasannya :
| Selector | Contoh | Penjelasan contoh |
|---|---|---|
| :active | a:active | selector link aktif |
| :checked | input:checked | selector elemen <input> saat dicek |
| :disabled | input:disabled | selector elemen <input> saat disable |
| :empty | p:empty | selector elemen <p> yang tidak memiliki anak. |
| :enabled | input:enabled | selector elemen <input> saat enable |
| :first-child | p:first-child | selector elemen <p> yang merupakan anakan pertama dari induk. |
| :first-of-type | p:first-of-type | selector elemen <p> yang merupakan elemen pertama dari elemen induk. |
| :focus | input:focus | selector elemen <input> yang berada dalam kondisi fokus. |
| :hover | a:hover | selector semua link ketika ada cursor mouse diatasnya. |
| :in-range | input:in-range | selector elemen <input> yang memiliki nilai didalam range tertentu. |
| :invalid | input :invalid | selector elemen <input> yang memiliki nilai tidak valid |
| :lang(language) | p :lang(it) | selector elemen <p> yang memiliki atribut lang dengan nilai yang diawali dengan “it”. |
| :last-child | p :last-child | selector elemen <p> yang merupakan anakan terakhir dari induk. |
| :last-of-type | p :last-of-type | selector elemen <p> yang merupakan elemen terakhihr dari induk. |
| :link | a :link | selector semua link yang belum dikunjungi. |
| :not(selector) | :not(p) | selector semua elemen bukan <p>. |
| :nth-child(n) | p :nth-child(2) | selector elemen <p> yang merupakan anakan kedua dari induk. |
| :nth-last-child(n) | p :nth-last-child(2) | selector elemen <p> yang merupakan anakan kedua dari induk dihitung dari anakan terakhir. |
| :nth-last-of-type(n) | p :nth-last-of-type(2) | selector elemen <p> yang merupakan elemen kedua dari induk dihitung dari elemen terakhir. |
| :nth-of-type(n) | p :nth-of-type(2) | selector elemen <p> yang merupakan elemen kedua dari induk. |
| :only-of-type | p :only-of-type | selector elemen <p> yang hanya merupakan elemen <p> satu-satunya dalam induk. |
| :only-child | p :only-child | selector elemen <p> yang merupakan satu-satunya anakan dari induk. |
| :optional | input :optional | selector elemen <input> yang yang tidak memiliki atribut required. |
| :out-of-range | input :out-of-range | selector elemen <input> yang memiliki nilai diluar jangkauan. |
| :read-only | input :read-only | selector elemen <input> yang memiliki atribut readonly. |
| :read-write | input :read-write | selector elemen <input> yang tidak memiliki atribut readonly. |
| :required | input :required | selector elemen <input> yang yang memiliki atribut required. |
| :root | root | selector elemen root dokumen. |
| :target | #news :target | selector elemen #news yang sedang aktif. |
| :valid | input :valid | selector semua elemen <input> yang memiliki nama valid. |
| :visited | a :visited | selector semua link yang telah dikunjungi. |
Lihat indeks artikel Tutorial CSS Dasar >>
Referensi :
