<input> berwarna hijau.Ada dua hal yang harus kau 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 dipakai untuk mendemonstrasikan imbas :hover dan :active pada elemen <input>
- Kondisi normal digambarkan sebagai warna hijau
- Saat kau melihat warna kuning, itu artinya
:hover - Saat kau melihat warna merah, itu artinya
:active
Area Hijau ke Dua: Klik!
Area di bawah ini dipakai untuk mendemonstrasikan imbas :focus pada elemen <input>
- Kondisi normal digambarkan sebagai warna hijau
- Saat kau melihat warna ungu, itu artinya
:focus
- :hover ialah selektor CSS untuk menyatakan keadaan ketika pointer berada di atas elemen.
- :active ialah selektor CSS untuk menyatakan keadaan ketika pointer mengeklik elemen.
- :focus juga dipakai untuk menyatakan keadaan ketika pointer mengeklik elemen menyerupai halnya :active, namun :focus mempunyai kemampuan untuk mempertahankan keadaannya meskipun kita sudah menghentikan agresi klik, sedangkan :active hanya akan mengubah keadaan elemen dikala kita mengklik elemen tersebut, namun efeknya akan menghilang sesaat sesudah kita menghantikan agresi klik. Efek :focus akan menghilang dikala kita mengeklik sesuatu di luar area tersebut. :focus hanya berlaku untuk elemen-elemen formulir dan tautan.
:link dan :visited ialah selektor khusus untuk elemen tautan:
- :link dipakai untuk mengatur tampilan tautan yang aktif (yang mempunyai atribut
href) - :visited dipakai untuk mengatur tampilan tautan yang sudah pernah dikunjungi. :visited sangat bermanfaat untuk memberitahukan kepada pengunjung bahwa tautan yang ia lihat sudah pernah dikunjungi, sehingga pengunjung tidak akan tersesat.
Urutan standar pseudo-class elemen tautan ialah menyerupai ini:
a:link { /* deklarasi */ } a:visited { /* deklarasi */ } a:focus { /* deklarasi */ } a:hover { /* deklarasi */ } a:active { /* deklarasi */ }Anggota Lain CSS Pseudo-Classes
Selektor-selektor pseudo-class di bawah ini tidak dipakai untuk menangani event mouse dikala melaksanakan sesuatu pada elemen, tetapi lebih mengarah kepada sesuatu menyerupai pemanipulasian atau penyeleksian elemen-elemen yang tidak terseleksi oleh atribut tertentu.
Umumnya, kita akan menyeleksi elemen khusus dengan menambahkan atribut berupa class='' atau id='' untuk menerapkan deklarasi-deklarasi CSS khusus. Namun dengan CSS Pseudo-Class, kita tidak perlu lagi melaksanakan itu.
:first-child & :last-child
:first-child dipakai untuk menyeleksi elemen yang merupakan anak pertama dari sebuah elemen induk, sedangkan :last-child dipakai untuk menyeleksi elemen yang merupakan anak terakhir dari sebuah elemen induk. Misalnya begini:
<ul> <li>Saya ialah anak pertama dari elemen <ul> yang mempunyai kelas demo1</li> <li>Saya bukan anak pertama/terakhir dari elemen <ul> yang mempunyai kelas demo1</li> <li>Saya bukan anak pertama/terakhir dari elemen <ul> yang mempunyai kelas demo1</li> <li>Saya ialah anak terakhir dari elemen <ul> yang mempunyai kelas demo1</li> </ul>Normalnya, kerangka objek tersebut akan meghasilkan tampilan menyerupai ini:
- Saya ialah anak pertama dari elemen <ul> yang mempunyai kelas demo1
- Saya bukan anak pertama/terakhir dari elemen <ul> yang mempunyai kelas demo1
- Saya bukan anak pertama/terakhir dari elemen <ul> yang mempunyai kelas demo1
- Saya ialah anak terakhir dari elemen <ul> yang mempunyai kelas demo1
Sekarang kita terapkan aba-aba CSS yang akan menawarkan warna biru pada elemen <li> pertama, dan akan menawarkan warna merah pada elemen <li> terakhir:
ul li:first-child {color:blue;} ul li:last-child {color:red;}Setelah diterapkan maka akan menghasilkan tampilan menyerupai ini:
- Saya ialah anak pertama dari elemen <ul> yang mempunyai kelas demo1
- Saya bukan anak pertama/terakhir dari elemen <ul> yang mempunyai kelas demo1
- Saya bukan anak pertama/terakhir dari elemen <ul> yang mempunyai kelas demo1
- Saya ialah anak terakhir dari elemen <ul> yang mempunyai kelas demo1
:lang()
:lang dipakai untuk mendefinisikan peraturan yang berbeda terhadap bahasa yang berbeda. Biasanya diterapkan pada elemen <q>.
Sebagai contoh, kita buat sebuah kalimat menyerupai ini:
<q lang="id">Taufik Nurrohman ialah 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 menyerupai ini:
Taufik Nurrohman ialah lelaki paling ganteng sedunia
Taufik Nurrohman is the most handsome boy in the world
Sekarang kita terapkan aba-aba CSS yang akan menawarkan warna hijau pada elemen <q> dengan atribut lang='id', dan akan menawarkan warna jingga pada elemen <q> dengan atribut lang='en':
q:lang(id) {color:green;} q:lang(en) {color:orange;}Setelah diterapkan maka akan menghasilkan tampilan menyerupai ini:
Taufik Nurrohman ialah lelaki paling ganteng sedunia
Taufik Nurrohman is the most handsome boy in the world
Sumber gambar: Spread Shirt