Pseudo Class
Pseudo class adalah sebuah selector yang terdapat dalam css.Selector ini berfungsi untuk memberikan efek menarik pada bagian tertentu di dalam HTML, maksudnya disini adalah bagian HTML yang tidak bisa di akses dengan selector biasa.Ada juga beberapa pseudo class yang sering digunakan atau paling populer digunakan pada halaman sebuah website, yakni.
:hover : Berfungsi untuk menambahkan style pada elemen dan ketika mouse berada di atasnya.
:link : Berfungsi untuk menambahkan style pada link yang belum pernah di kunjungi.
:active : Berfungsi untuk menambahkan style pada element yang sedang aktif.
:visited : Berfungsi untuk menambahkan style pada link yang telah di kunjungi
Cara penulisan seperti di bawah ini.
selector:pseudo-class {
property: value;
}
Ingat, untuk penulisan pseudo class kita harus menulis duluan adalah selector terlebih dahulu, dan di ikuti dengan properti dan value (nilai).
Untuk contoh saya akan membuat sebuah link yang namanya "Home".Dan ketika mouse berada pada link yang bernama "Home" dia akan berubah style yaitu warna text nya berubah menjadi merah dan ukuran text nya menjadi lebih besar.Dan ketika di klik link tersebut akan berubah menjadi warna hitam.
<html>
<head>
<title>Penulisan Pseudo Class</title>
<style type="text/css">
a:hover{
color: red;
font-size: 20px;
}
a:active{
color: black;
}
</style>
</head>
<body>
<a href="#">Home</a>
</body>
</html>
Baca Juga : Membuat link dengan html
Dan silahkan lihat hasilnya.
Pseudo Element
Pseudo element merupakan sebuah selector dimana selector ini berfungsi untuk menyeleksi element atau tag secara otomatis, atau bisa juga di artikan sebagai selector yang menciptakan element atau tag palsu tanpa menuliskan kode HTML.Penulisan pseudo element ini tidak beda jauh juga dengan pseudo class, hanya bedanya saja pada pseudo element ini penulisannya kita harus menambahkan tanda : menjadi dua kali atau seperti ini ::
Sebagai contoh lihat script di bawah ini.
selector::pseudo-element {
property: value;
}
Beberapa selector pada pseudo element yang sering di gunakan pada halaman website.Yaitu, ::first-line, ::before, ::after, dan ::first-letter.
Sampai disini dulu tutorial css kita, nanti kita akan lanjut lagi ya.
