Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Mengenal Pseudo Class dan Pseudo Elemen

Mengenal Pseudo Classes dan Pseudo Element serta CSS dan HTML-nya.

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 :

Penggunaan :link, :hover, :active dan:visited

: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 */
}

Penggunaan :focus

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

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

49 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. wah penjelasannya mudah dipahami nih.. yang langkah pertama kedua sama ya. pas di tahan kayak di reload gitu.
    1. bukan di reload, tapi aktif aja.. coba di tes di menu blog
    2. Mantep bang,
  2. wah dapat kursus singkat, thx kang sangat bermanfaat
    1. hehhe... semoga bermanfaat sob
  3. Minta izin nyimak dulu kang...maklum, rada2 lola banget ama kode2 hyml diatas :p
    1. lambat laun juga bakal faham ko sob, gampang ko
  4. thnaks kang penjelasannya...
    saya yang masih rada bingung pseudo element after dan before..
    masih gelap kalau ga ada contoh.. :D
    1. sama2 sob... wah merendah gitu, masa masternya bikin template maih bingung :)
    2. Sama dengan agan Abdul Rohman, mohon penjelasan rincinya kang tentang before dan after dalam penyimpanan posisi, apakah bisa digunakan efek hover juga?
    3. nanti saya buat artikel baru lagi sob... untuk hover bisa ko, contoh CSS:
      objek:before{content:"";display:none}
      objek:before:hover{display:inline}

    4. ahaha saya juga masih belajar bikin template..
      owhh ternyata bisa dikasih hover juga ya...
      mantep ni..
  5. mantrep kang tutornya makasih,saya pelajari dulu.
    1. silahkan sob... jangan terlalu serius belajarnya.. sambil ngopi aja :)
  6. Tapi masih bingung Mas,fungsinya sebenarnya untuk apa Mas?
    1. 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;}
  7. Wih mantap Kang,..!!
    1. tengkyu sob...
  8. Keren Gan sangat bermanfaat !!

    Come back
    1. sama2 sob...makasih kalau bermanfaat..
  9. mas, kalo yang contoh kotak gitu bisa ditambah kalimat gk, kalo bisa kasih tau caranya mas?
    1. 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>
  10. 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.
    1. wa'alaikum salam.. nuhun kang, nanti saya cari posisi yang enak untuk link sahabatnya :)
    2. dipojok kanan bawah ada slot masih...
      ntar saya ikutan barter link.. :D
  11. Wow keren tutornya kang hehe
    btw kata bang abdul bener juga kang .. biar kita lebih dekat
    1. hehehe... siap dipikirkan :)
  12. mulai sedikit mengerti..,terima kasih kang.., mgkn carax sama klo bikin ribbon kali ya??
    1. emang sama bgt... :D
    2. tuh udah ada yang jawab... :D
    3. heheh.., walaupun sy tau tp gk bs pratekin *smile
  13. Ane pelajari dulu bang..rada2 puyeng nih.
    1. hehehe... gampang ko
  14. Hehe..saya udah akrab dengan kode-kode ini kang, tapi saya baru tahu namanya...
    1. sering ketemu di angkot, tapi ga pernah nanya nama ya kang.... :)
  15. Penjelasannya lengkap banget kang,..
    Kalo saya hanya mengerti tentang link aja, seperti :active, :visited dan :hover, selain itu nggk ngerti :D
    Thanks kang ismet !
    1. semoga jadi ngerti sekarang ya.. :)
  16. Terima kasih kang infonya, nice tutorial. Hatur nuhun...
  17. Artikel Begini nih yang perlu diperbanyak mas,Apalagi Dasar-dasar dari syntax
  18. Sumpah.. Kang Saya Lagi Butuh Yang :Before itu..
    Terima Kasih Kang :D
  19. selama ini saya hanya memakai di link menu saja, setelah baca artikel akang ternyata dapat tambahan ilmu lagi. terima kasih kang atas pembelajaran-nya
  20. Lengkap sekali artikelnya Kang
    Langsung praktek, di coba terima kasih Kang Ismet
  21. hihi asik mulai ngerti tentang css hihi

    mau nanya masalah css, tapi nanti aja ah, hhi
    1. wah si akangnuju ngacak2 blog abdi.. sok mangga sing wareg kang :D
  22. keren tutornya gan ^_^

    tapi masih blom pahan gan...
  23. alhamdulillah setelah otak atik buat template sendiri akhirnya paham juga dengan yang satu ni....terimakasih kang ilmunya
  24. 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.
  25. nambah lagi nih pengetahuan ane |o|
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.