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

HomeContactContoh 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...

49 komentar

wah penjelasannya mudah dipahami nih.. yang langkah pertama kedua sama ya. pas di tahan kayak di reload gitu.

Balas

wah dapat kursus singkat, thx kang sangat bermanfaat

Balas

Minta izin nyimak dulu kang...maklum, rada2 lola banget ama kode2 hyml diatas :p

Balas

thnaks kang penjelasannya...
saya yang masih rada bingung pseudo element after dan before..
masih gelap kalau ga ada contoh.. :D

Balas

mantrep kang tutornya makasih,saya pelajari dulu.

Balas

Tapi masih bingung Mas,fungsinya sebenarnya untuk apa Mas?

Balas

Keren Gan sangat bermanfaat !!

Come back

Balas

bukan di reload, tapi aktif aja.. coba di tes di menu blog

Balas

hehhe... semoga bermanfaat sob

Balas

lambat laun juga bakal faham ko sob, gampang ko

Balas

sama2 sob... wah merendah gitu, masa masternya bikin template maih bingung :)

Balas

silahkan sob... jangan terlalu serius belajarnya.. sambil ngopi aja :)

Balas

untuk memanipulasi elemen tertentu.. coba liat menunya infosaja.com kan berwarna biru, pas di sentuh mouse jadi abu2 muda, itu yg dinamakan pseudo class :hover. coba edit warna pada CSS ini:

.topnav li:hover {background: #dadada;}

Balas

sama2 sob...makasih kalau bermanfaat..

Balas

Sama dengan agan Abdul Rohman, mohon penjelasan rincinya kang tentang before dan after dalam penyimpanan posisi, apakah bisa digunakan efek hover juga?

Balas

nanti saya buat artikel baru lagi sob... untuk hover bisa ko, contoh CSS:
objek:before{content:"";display:none}
objek:before:hover{display:inline}

Balas

mas, kalo yang contoh kotak gitu bisa ditambah kalimat gk, kalo bisa kasih tau caranya mas?

Balas

assalmu'alaikum wr.wb kang.
Ane cm nyimak aja soalnya gk ngerti blog akang makin keren wae.
Oh iya kang link blog akang udh di pasang di blog ane apabila gk keberatan mohon link blog ane di pasang di blog ini agar silaturahmi makin erat.

Balas

ahaha saya juga masih belajar bikin template..
owhh ternyata bisa dikasih hover juga ya...
mantep ni..

Balas

yang biru itu ya? bisa ko yang height:90px hilangkan, tambah kode ini :
height:auto;
padding:15px;

contoh htmlnya
<div id="kotak-contoh">
..blablablablabla.......
</div>

Balas

wa'alaikum salam.. nuhun kang, nanti saya cari posisi yang enak untuk link sahabatnya :)

Balas

dipojok kanan bawah ada slot masih...
ntar saya ikutan barter link.. :D

Balas

Wow keren tutornya kang hehe
btw kata bang abdul bener juga kang .. biar kita lebih dekat

Balas

mulai sedikit mengerti..,terima kasih kang.., mgkn carax sama klo bikin ribbon kali ya??

Balas

hehehe... siap dipikirkan :)

Balas

tuh udah ada yang jawab... :D

Balas

heheh.., walaupun sy tau tp gk bs pratekin *smile

Balas

Ane pelajari dulu bang..rada2 puyeng nih.

Balas

Hehe..saya udah akrab dengan kode-kode ini kang, tapi saya baru tahu namanya...

Balas

sering ketemu di angkot, tapi ga pernah nanya nama ya kang.... :)

Balas

Penjelasannya lengkap banget kang,..
Kalo saya hanya mengerti tentang link aja, seperti :active, :visited dan :hover, selain itu nggk ngerti :D
Thanks kang ismet !

Balas

semoga jadi ngerti sekarang ya.. :)

Balas

Terima kasih kang infonya, nice tutorial. Hatur nuhun...

Balas

Artikel Begini nih yang perlu diperbanyak mas,Apalagi Dasar-dasar dari syntax

Balas

Sumpah.. Kang Saya Lagi Butuh Yang :Before itu..
Terima Kasih Kang :D

Balas

selama ini saya hanya memakai di link menu saja, setelah baca artikel akang ternyata dapat tambahan ilmu lagi. terima kasih kang atas pembelajaran-nya

Balas

Lengkap sekali artikelnya Kang
Langsung praktek, di coba terima kasih Kang Ismet

Balas

hihi asik mulai ngerti tentang css hihi

mau nanya masalah css, tapi nanti aja ah, hhi

Balas

wah si akangnuju ngacak2 blog abdi.. sok mangga sing wareg kang :D

Balas

hihi muhun kang ismet,.ngan seeur teuing ning elmu na, teu kawadahan sakieu ge,. hihi

Balas

keren tutornya gan ^_^

tapi masih blom pahan gan...

Balas

alhamdulillah setelah otak atik buat template sendiri akhirnya paham juga dengan yang satu ni....terimakasih kang ilmunya

Balas

Assiikk, les CSS gratis nih, Kang Ismet bisa tolong jelasin lagi ga yang psuedo element, aku masih rada-rada bingung pisan, tinggal satu step lagi trial error bikin homepag mirip akang.

Balas

nambah lagi nih pengetahuan ane |o|

Balas

Poskan Komentar


×
Chat