Agak sulit untuk menjelaskan teori CSS Pseudo-Classes ini. Sebenarnya bisa dijelaskan, namun Saya rasa itu sangat membuang-buang waktu. Untuk menghemat waktu, di sini Saya sudah menyediakan dua buah area yang Saya buat dari elemen
<inputgt; berwarna hijau.Ada dua hal yang harus kamu lakukan dalam area hijau pertama, yaitu meletakkan pointer di atas area, dan mengeklik area tersebut. Sedangkan untuk area hijau yang ke dua cukup dengan mengekliknya.
Demonstrasi CSS Pseudo-Classes
Area Hijau Pertama: Letakkan Pointer, Lalu Klik!
Area di bawah ini digunakan untuk mendemonstrasikan efek hover dan active pada elemen<input>- Kondisi normal digambarkan sebagai warna hijau
- Saat kamu melihat warna kuning, itu artinya :hover
- Saat kamu melihat warna merah, itu artinya :active
Area Hijau ke Dua: Klik Area Ini!
Area di bawah ini digunakan untuk mendemonstrasikan efek focus pada elemen<input>- Kondisi normal digambarkan sebagai warna hijau
- Saat kamu melihat warna ungu, itu artinya :focus
Kesimpulan:
- :hover dapat diartikan sebagai keadaan elemen saat dikunjungi pointer.
- :active dapat diartikan sebagai keadaan elemen saat diklik.
- :focus juga dapat diartikan sebagai keadaan elemen saat diklik. Artinya memang hampir sama dengan :active, hanya bedaya, :focus akan tetap mempertahankan warnanya meskipun aksi klik telah berakhir, sementara :active akan menghilangkan warnanya sesaat setelah aksi klik diakhiri. Warna :focus hanya akan menghilang ketika kamu melakukan aksi klik di luar area tersebut.
Selain pseudo-class :hover, :active dan :focus juga terdapat pseudo-class lain yaitu :link dan :visited. Penerapan CSS Pseudo-Class ini lebih difokuskan pada elemen-elemen berupa anchor link (
<a>). Berikut ini adalah contoh penerapannya:
- a:link adalah keadaan saat sebuah tautan/hyperlink belum pernah diklik atau dikunjungi.
- a:visited adalah keadaan saat sebuah tautan/hyperlink telah dikunjungi. Pseudo-class
a:visitedsangat bermanfaat apabila diterapkan dalam halaman yang memiliki begitu banyak link. Dengan menerapkana:visited, maka link-link yang sudah pernah dikunjungi akan berubah warna. Hal ini tentunya akan sangat membantu para pengunjung agar tidak tersesat atau membuka link yang sama untuk yang ke dua kali.
Pseudo-class :hover dan :active umumnya bisa diterapkan pada semua elemen, namun pseudo-class :link, :visited dan :focus hanya dapat diterapkan pada elemen-elemen berupa
<input>, <textarea>, dan yang lainnya (elemen-elemen formulir) dan elemen <a>.Urutan deklarasi sangat penting bagi pseudo-class :hover , :focus dan :active , tergantung pada apa yang ingin kamu kehendaki. Urutan deklarasi yang paling sering diterapkan pada link/tautan adalah seperti ini:
a:link {
deklarasi
}
a:visited {
deklarasi
}
a:focus {
deklarasi
}
a:hover {
deklarasi
}
a:active {
deklarasi
}Pseudo-class :link dan :visited umumnya harus datang terlebih dahulu, berikutnya adalah :focus atau :hover. Pseudo-class :active harus selalu datang terakhir, karena kita biasanya melakukan langkah pengaktifan pada saat terakhir (setelah :hover tentunya).
Anggota CSS Pseudo-Class Lainnya
Ada lagi beberapa anggota CSS Pseudo-Classes yang penerapannya tidak terfokus pada bagaimana sebuah mouse/tetikus melakukan sesuatu pada elemen, tetapi lebih mengarah kepada sesuatu seperti pemanipulasian atau penyeleksian elemen-elemen yang tidak terseleksi oleh atribut tertentu. Umumnya kita menyeleksi elemen khusus dengan menambahkan atribut berupaclass='' atau id='' untuk menerapkan deklarasi-deklarasi CSS khusus. Namun dengan CSS Pseudo-Class, kita tidak perlu lagi melakukan itu.:first-child & :last-child
Pseudo-class :first-child digunakan untuk menyeleksi elemen yang merupakan anak pertama dari sebuah elemen induk, sedangkan pseudo-class :last-child digunakan untuk menyeleksi elemen yang merupakan anak terakhir dari sebuah elemen induk. Misalnya begini:<ul class='demo1'>
<li>Saya adalah anak pertama dari elemen <ul> yang memiliki CLASS demo1</li>
<li>Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki CLASS demo1</li>
<li>Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki CLASS demo1</li>
<li>Saya adalah anak terakhir dari elemen <ul> yang memiliki CLASS demo1</li>
</ul>Normalnya, kerangka objek tersebut akan meghasilkan tampilan seperti ini:
- Saya adalah anak pertama dari elemen <ul> yang memiliki CLASS demo1
- Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki CLASS demo1
- Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki CLASS demo1
- Saya adalah anak terakhir dari elemen <ul> yang memiliki CLASS demo1
Sekarang kita terapkan kode CSS yang akan memberikan warna biru pada elemen
<li> pertama, dan akan memberikan warna merah pada elemen <li> terakhir. Bentuknya seperti ini:ul.demo1 li:first-child {color:blue;}
ul.demo1 li:last-child {color:red;}Setelah diterapkan maka akan menghasilkan tampilan seperti ini:
- Saya adalah anak pertama dari elemen <ul> yang memiliki CLASS demo1
- Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki CLASS demo1
- Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki CLASS demo1
- Saya adalah anak terakhir dari elemen <ul> yang memiliki CLASS demo1
:lang()
Pseudo-class :lang digunakan untuk mendefinisikan peraturan yang berbeda terhadap bahasa yang berbeda. Biasanya diterapkan pada elemen<q>.Sebagai contoh, kita buat sebuah kalimat seperti ini:
<q lang="id">Taufik Nurrohman adalah lelaki paling ganteng sedunia</q>
<q lang="en">Taufik Nurrohman is the most handsome boy in the world</q>Normalnya, kerangka objek tersebut akan meghasilkan tampilan seperti ini:
"Mafia Hacker Adalah Blog Terkeren Di dunia"
Sekarang kita terapkan kode CSS yang akan memberikan warna hijau pada elemen
<q> dengan atribut lang='id', dan akan memberikan warna jingga pada elemen <q> dengan atribut lang='en'. Bentuknya seperti ini:q:lang(id) {color:green;}
q:lang(en) {color:orange;}Setelah diterapkan maka akan menghasilkan tampilan seperti ini:
"Mafia Hacker Adalah Blog Terkeren Di dunia"
"Mafia Hacker Blog is coolest in the world
