Tuesday, December 30, 2014

Tutorial CSS Part 20: Mengenal Pseudo Class

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 :

0 komentar

Post a Comment