Mengenal Pseudo Class pada CSS.

Mengenal Pseudo Class pada CSS ini merupakan artikel lanjutan dari artikel sebelumnya yaitu Mengenal Pseudo Element, mungkin sobat sudah sering mendengar kata pseudo ataupun mungkin sudah sangat paham dengan pseudo dan sudah sering menggunakannya, disini saya membuat artikel ini hanya untuk melengkapi dari artikel saya mengenai pseudo element, pseudo class digunakan untuk memberikan efek terhadap selektor tertentu. Sebagai contoh, satu tautan (link) bisa berubah-ubah warna, biru sebelum dikunjungi, ungu ketika disentuh mouse, merah ketika aktif, dan hijau setelah dikunjungi. Adapun contoh pseudo class adalah sebagai berikut :

:link - yaitu tautan sebelum dikunjungi.
:hover - yaitu ketika mouse disimpan di atasnya.
:active - yaitu link yang sedang aktif (misalnya menu yang sedang diklik akan diberi warna berbeda dengan warna sebelumnya.
:visited - yaitu link yang sudah dikunjungi (ini untuk mempermudah pengguna, dalam membedakan mana link yang sudah dikunjungi dan belum)
Sebagai contoh perhatikan blok menu dibawah ini, pertama lihat warna, kedua arahkan mouse diatas warna biru, ketiga klik dan tahan.

HomeContactContoh Link

Blok di atas berwarna biru, ketika mouse diarahkan di atasnya akan berubah menjadi ungu, itulah pseudeo class :hover. Kemudian ketika diklik dan ditahan, akan berwarna merah, itulah pseudeo class :active. Tulisan Contoh link berwarna hijau, karena link mengarah ke postingan ini dan Anda sudah mengunjunginya, itulah pseudeo class :visited.

Untuk standar pseduo class adalah seperti ini :

a:link{
/* deklarasi */
}
a:visited{
/* deklarasi */
}
a:hover{
/* deklarasi */
}
a:active{
/* deklarasi */
}
a:focus{
/* deklarasi */
}

:focus - :focus ini tidak hanya terbatas pada link saja, akan tetapi sering digunakan pada kolom isian (textarea). Sebagai contoh lihat kolom isian di bawah, klik pada kolom.

Nama	:
Alamat	:

:disabled - yaitu untuk menonaktifkan kolom isian, untuk pengguna blogspot hal ini tidak terlalu penting karena jarang digunakan.
Untuk contoh :disabled lihat isian alamat diblok dengan warna orange.

Nama	:
Alamat	:

Contoh CSS

input.data:disabled{
background:#e57609;
border:1px solid#999;
color:#fff;
}

Untuk kode HTML-nya kurang lebih seperti ini :

<input class="fake-area"type="text"disabled="disabled"value="Mohon maaf, untuk sementara kolom dinonaktifkan!"/>

:enable - untuk membalik dari keadaan :disabled, sebenarnya tanpa enable pun bisa, hapus saja kode disabled="disabled"
:target - target biasanya dibarengi dengan hash tag (#) pseudeo class :target ini mengarahkan kepada elemen tertentu. Contoh saya membuat CSS target seperti ini:

#coba-target:target{
background:#ddd;
border:2px solid #333;
padding:70px 50px;
width:<50%; }

Untuk mencoba perhatikan kolom isian yang disabled kemudian KLIK DISINI, Untuk me-refresh klik DISINI.
:lang() - biasanya digunakan untuk membedakan dalam bahasa, seperti Bahasa Indonesia dan Inggris. Akhir kata berakhir pulalah topik bahasan kita mengenai Pseudo class, semoga bermanfaat dan terimakasih banyak atas kunjungannya.
Sumber referensi : http://blog.kangismet.net/2013/05/mengenal-pseudo-class-dan-pseudo-elemen.html.

Share this: