Mengenal Pseudo Class dan Pseudo Elemen

Pseudo Class dan Pseudo Element - Mungkin sobat sudah sering mendengan istilah pseudo ini. Arti secara bahasa pseudo adalah tidak real, bukan sebenarnya, dan sejenisnya. (silahkan cari sendiri hehe...) Untuk lebih jelasnya silahkan simak pada Pseudo class dan Pseudo Elemen.

Pseudo Class

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.

Hal ini sebenarnya sudah sering digunakan sebetulnya oleh sahabat, diantara pseudo class :

: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 simpan mouse diatas warna biru, ketiga klik dan tahan.

Home Contact Contoh Link


Blok di atas berwarna biru, ketika mouse disimpan 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 (boleh diisi hehehe....)

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, sebenernya 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.

Pseudo Element


:first-child - untuk merubah elemen pertama pada elemen induk
:last-child - untuk merubah elemen terakhir pada elemen induk

Sebagai contoh, saya punya kerangka seperti ini :

<ul>
    <li>ini adalah first-child dari elemen utama</li>
    <li>ini elemen ke-2 dari elemen utama</li>
    <li>ini elemen ke-3 dari elemen utama</li>
    <li>ini adalah last-child dari elemen utama</li>
</ul>

Saya tambahkan CSS pada elemen di atas

ul li:first-child {color:blue;}
ul li:last-child {color:red;}

Maka hasilnya seperti ini :

• ini adalah first-child dari elemen utama
• ini elemen ke-2 dari elemen utama
• ini elemen ke-3 dari elemen utama
• ini adalah last-child dari elemen utama

Untuk lebih memahaminya, pada blog saya, :first-child dan :last-child digunakan pada Widget Komentar Sahabat dan Sering Dikunjungi. Pada tag <li> saya gunakan border-bottom: 1px solid #ccc; dan border-top: 1px solid #fff;.

Apabila pada first-child dan last-child tidak dihilangkan border-nya, maka pada kotak utama, kotak atas akan berwarna putih dan kotak bawah berwarna abu-abu agak tua.

:first-line - untuk merubah elemen pada baris pertama sebuah paragraf atau elemen induk.

:first-letter - untuk menyeleksi huruf pertama pada sebuah paragraf atau elemen induk.

Sebagai contoh saya mempunyai kerangka seperti ini :

<div id="paragraf">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>

kemudian saya tambahkan CSS

#paragraf:first-line {color:red;}

maka akan menghasilkan tampilan seperti ini :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Kemudian saya tambahkan CSS :first-letter

#paragraf:first-letter {color:blue;font-size:160%;font-weight:bold;font-family:Georgia}

maka akan menghasilkan tampilan seperti ini (seperti fungsi Drop-cap) :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

:before dan :after

:before digunakan untuk memberi tambahan sebelum elemen utama. Sedangkan :after digunakan untuk memberi tambahan sesudah elemen utama. Tambahan bisa berupa teks, objek, atau gambar.

Sebagai contoh saya membuat CSS seperti ini :

#kotak-contoh{
background:#4aa4ba;
border-radius:5px;
width:auto;
height:90px;
position:relative;
}

maka hasilnya hanya sebuah kotak berwarna biru. :

Kemudian saya tambahkan segi tiga diatasnya dengan CSS seperti ini

#kotak-contoh:before{
content:"";
width:0;
height:0;
position:absolute;
bottom:100%;
right:15px;
border:8px solid transparent;
border-color:transparent transparent #4aa4ba;
}

maka hasilnya akan terlihat seperti di bawah ini...

Sebetulnya masih banyak pseudo class dan pseudo element yang tidak saya tuliskan di sini. Selamat mencari dan berkreasi...

Sumber : http://blog.kangismet.net/2013/05/mengenal-pseudo-class-dan-pseudo-elemen.html

Tweet

Postingan terkait:

Ditulis Dandi Saseno — Monday, 27 May 2013 — 4 Comments — tutorial blog