Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 23 : Pseudo Class dan Pseudo Element pada CSS

By Web Design Purbalingga
Pseudo Class dan Pseudo Element pada CSS – Apa arti dari pseudo class dan pseudo element? Pesudo itu hampir sama dengan class dan id. Hanya saja yang membedakan adalah pseudo memblok secara mendetail atau spesifik. Maksudnya adalah jika class dan id itu hanya bisa memblok elemen yang memiliki class dan id saja, tapi pesudo ini bisa memblok elemen yang di dalam class dan id.

Pseudo Class dan Pseudo Element pada CSS

Pada materi kali ini kita akan membahas secara bersamaan tentang materi pseudo ini. Berikut ini adalah penjabarannya;

Pseudo Class

Pseudo class digunakan untuk menentukan status khusus suatu elemen. Seperti yang saya singgung sebelumnya, bahwa pesudo bisa memberikan perintah ke elemen secara spesifik. Nah, berikut ini adalah beberapa contoh fungsi dari pseudo class ini;
- merubah warna elemen saat mouse di arahkan ke elemen tersebut
- merubah warna link saat akan di klik dan pada saat link sudah di klik
- merubah warna latar saat elemen di klik
Adapun struktur kode untuk menggunakan pseudo class ini adalah

selector:pseudo-class {
    property:value;
}
Silahkan ketik baris kode berikut ini untuk melihat contohnya
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS Pseudo</title>
<style>
/* saat link belum di klik atau masih default */
a:link {
    color: red;
}

/* setelah link di klik */
a:visited {
    color: green;
}

/* saat mouse di arahkan ke link */
a:hover {
    color: hotpink;
}

/* saat link terpilih */
a:active {
    color: blue;
}
</style>
</head>
<body>

<p><b><a href="webdesignpurbalingga.blogspot.com" target="_blank">Ini adalah link</a></b></p>

</body>
</html>

Pseudo Element

Perbedaan dari pseudo sebelumnya adalah, untuk pseudo ini kita bisa memilih sebagian elemen saja yang akan kita beri gaya. Contohnya adalah ada sebuah paragraf yang terdiri dari 4 baris atau lebih, dan saya ingin teks baris pertama di beri gaya dengan warna hijau. Nah itu adalah satu yang bisa dilakukan oleh pseudo element ini. Struktur penulisan syntax pseudo element adalah berikut ini.
selector::pseudo-element {
    property:value;
}
Agar lebih jelasnya perhatikan contoh berikut ini dan jangan lupa tampilkan hasilnya.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
</style>
</head>
<body>

<p>Di blog ini kamu bisa belajar web design dan web programming dengan dukungan beberapa materi seperti html, css, javascript, php, java dan beberapa materi lainnya seperti framework dll. Kecilkan ukuran browsermu untuk melihat efek dari pseudo ini.</p>

</body>
</html>
Apa saja yang bisa kita lakukan dengan pseudo element ini? Berikut ini adalah aksi yang bisa kita lakukan dengan pseudo element ini;
- mengubah font
- mengubah warna
- mengubah warna latar
- menambahkan spasi antar kata
- menambahkan spasi antar huruf
- dekorasi teks
- dll
Sekian materi kali ini tentang pseudo class dan pseudo element. Jika ada yang belum jelas, silahkan tinggalkan pertanyaan di kolom komentar di bawah ini. Semoga bermanfaat dan jangan lupa untuk membagikan artikel ini ke sosial media kamu.