Selector Pseudo-Class dan Selector Pseudo-element ini memang bisa terbilang "rumit" tetapi tidak terlalu "susah" untuk di pahami karena penggunaan Selector Pseudo ini digunakan untuk bagian bagian kode HTML yang "tidak terlihat" atau bisa juga di maksudkan sebagai bagian dari sebuah tag yang tidak bisa diakses dengan selector biasa. Oke langsung saja lebih jelasnya simak berikut ini.
Apa Itu Pseudo Class Dalam CSS ?
Pseudo Class merupakan sebuah selector dalam CSS, dimana selector ini berfungsi untuk memberikan efek pada bagian tertentu di dalam HTML yang tidak tertulis di dalam HTML, atau lebih sederhananya adalah bagian HTML yang tidak bisa di akses dengan selector yang biasa.
Berikut ini Syntax untuk Pseudo class di dalam CSS adalah sebagai berikut.
:link : Berfungsi untuk menambahkan style pada link yang belum pernah di kunjungi atau klik.
:hover : Berfungsi untuk menambahkan style pada elemen pada saat mouse berada di atasnya.
:active : Berfungsi untuk menambahkan style pada elemen yang sedang aktif
:visited : Berfungsi untuk menambahkan style pada link yang sudah pernah di kunjungi
Sebagai contoh, perhatikan blok menu berikut ini dan silahkan arahkan cursor anda pada blog menu dan coba klik.
Menu 1 Menu 2
Keterangan : Pada kedua blok tersebut terlihat berwarna biru, tetapi ketika mouse di arahkan di atasnya maka akan berubah menjadi warna merah itulah yang disebut dengan pseudo-class :hover. Kemudian ketika blok menu tersebut diklik dan ditahan maka akan berubah menjadi warna hitam, itulah pseudeo class :active.
Sedangkan untuk kode HTML dan CSS yang saya gunakan pada contoh di atas adalah sebagai berikut ini.
Selector:pseudo-class {
property: value;
}
Berikut ini adalah standar pseudo class yang umum atau sering digunakan pada sebuah halaman web.:link : Berfungsi untuk menambahkan style pada link yang belum pernah di kunjungi atau klik.
:hover : Berfungsi untuk menambahkan style pada elemen pada saat mouse berada di atasnya.
:active : Berfungsi untuk menambahkan style pada elemen yang sedang aktif
:visited : Berfungsi untuk menambahkan style pada link yang sudah pernah di kunjungi
Sebagai contoh, perhatikan blok menu berikut ini dan silahkan arahkan cursor anda pada blog menu dan coba klik.
Menu 1 Menu 2
Keterangan : Pada kedua blok tersebut terlihat berwarna biru, tetapi ketika mouse di arahkan di atasnya maka akan berubah menjadi warna merah itulah yang disebut dengan pseudo-class :hover. Kemudian ketika blok menu tersebut diklik dan ditahan maka akan berubah menjadi warna hitam, itulah pseudeo class :active.
Sedangkan untuk kode HTML dan CSS yang saya gunakan pada contoh di atas adalah sebagai berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Pseudo Class</title>
<style>
.contoh-pseudo {
text-align: center;
display: inline;
display: inline;
color: #fff;
background:blue;
padding: 8px 40px;
cursor: pointer;
margin-right: 15px;
}
.contoh-pseudo:hover {background:red;}
.contoh-pseudo:active {background:black;}
</style>
</head>
<body>
<span class="contoh-pseudo">Menu 1</span>
<span class="contoh-pseudo">Menu 2</span>
</body>
</html>
Selain pada contoh di atas sebenarnya masih banyak lagi Selector Pseudo Class itu masihlah banyak, seperti :focus, :nth-child(N), :last-child, only-child dan :not(S). Mungkin saya akan jelaskan lebih lengkapnya pada artikel lain karena supaya tidak terlalu panjang.Apa itu Pseudo Element ?
Pseudo Element itu merupakan sebuah selector dimana selector ini berfungsi untuk menyeleksi elemen atau tag secara otomatis, tapi bisa juga di artikan sebagai selector yang menciptakan elemen atau tag palsu tanpa menuliskan kode HTML.
Pada versi CSS1 dan CSS2 Pseudo Element ini ditulis dengan menggunakan 1 tanda titik dua ":" sama halnya dengan Pseudo Class, tetapi pada versi CSS3 Pseudo Element ini ditulis dengan menggunakan 2 tanda titik dua "::", nahh perubahan ini dibuat supaya bisa lebih mempermudah membedakan antara Pseudo Class dan Pseudo Element.
Penggunaan 1 tanda titik dua ini masih bisa dibilang umum atau pasaran karena semua browser pada umumnya masih mendukung penggunaan 1 tanda titik dua ini, dan bahkan seperti browser Internet Explorer 8 (IE8) masih belum bisa mendukung penggunaan 2 tanda titik dua "::"
Sebagai contoh, Pseudo Element ::first-letter, dimana selector ::first-letter ini berfungsi untuk menyeleksi huruf pertama dari sebuah paragraf, atau secara sederhanya untuk membuat efek dropcap. Misalkan kita ingin membuat huruf pertama pada sebuah paragraf menjadi berwarna merah dan memberikan efek dropcap, maka kode CSSnya itu sebagai berikut.
Pada versi CSS1 dan CSS2 Pseudo Element ini ditulis dengan menggunakan 1 tanda titik dua ":" sama halnya dengan Pseudo Class, tetapi pada versi CSS3 Pseudo Element ini ditulis dengan menggunakan 2 tanda titik dua "::", nahh perubahan ini dibuat supaya bisa lebih mempermudah membedakan antara Pseudo Class dan Pseudo Element.
Penggunaan 1 tanda titik dua ini masih bisa dibilang umum atau pasaran karena semua browser pada umumnya masih mendukung penggunaan 1 tanda titik dua ini, dan bahkan seperti browser Internet Explorer 8 (IE8) masih belum bisa mendukung penggunaan 2 tanda titik dua "::"
Sebagai contoh, Pseudo Element ::first-letter, dimana selector ::first-letter ini berfungsi untuk menyeleksi huruf pertama dari sebuah paragraf, atau secara sederhanya untuk membuat efek dropcap. Misalkan kita ingin membuat huruf pertama pada sebuah paragraf menjadi berwarna merah dan memberikan efek dropcap, maka kode CSSnya itu sebagai berikut.
p:first-letter{
color: red;
font-size : 300%;
}
Selector pada Pseudo Element itu tidak hanya ::first-letter saja tetapi masih ada yang lainnya, yaitu ::first-line, ::before, dan ::after. nahh untuk yang lainnya saya akan jelaskan pada tutorial berikutnya.
No comments:
Post a Comment