Perkenalan CSS Pseudo-Classes

Agak sulit untuk menjelaskan CSS Pseudo-Classes. 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 <input> 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 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

• :hover adalah selektor CSS untuk menyatakan keadaan ketika pointer berada di atas elemen.
• :active adalah selektor CSS untuk menyatakan keadaan ketika pointer mengeklik elemen.
• :focus juga digunakan untuk menyatakan keadaan ketika pointer mengeklik elemen seperti halnya :active, namun :focus memiliki kemampuan untuk mempertahankan keadaannya meskipun kita sudah menghentikan aksi klik, sedangkan :active hanya akan mengubah keadaan elemen saat kita mengklik elemen tersebut, namun efeknya akan menghilang sesaat setelah kita menghantikan aksi klik. Efek :focus akan menghilang saat kita mengeklik sesuatu di luar area tersebut. :focus hanya berlaku untuk elemen-elemen formulir dan tautan.

:link dan :visited adalah selektor khusus untuk elemen tautan:

Contoh nyata CSS Pseudo-Classes pada situs Google

• :link digunakan untuk mengatur tampilan tautan yang aktif (yang memiliki atribut href)
• :visited digunakan 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 adalah seperti 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 digunakan untuk menangani event mouse saat melakukan sesuatu pada elemen, tetapi lebih mengarah kepada sesuatu seperti 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 melakukan itu.

:first-child & :last-child

:first-child digunakan untuk menyeleksi elemen yang merupakan anak pertama dari sebuah elemen induk, sedangkan :last-child digunakan untuk menyeleksi elemen yang merupakan anak terakhir dari sebuah elemen induk. Misalnya begini:

<ul>
    <li>Saya adalah anak pertama dari elemen &lt;ul&gt; yang memiliki kelas demo1</li>
    <li>Saya bukan anak pertama/terakhir dari elemen &lt;ul&gt; yang memiliki kelas demo1</li>
    <li>Saya bukan anak pertama/terakhir dari elemen &lt;ul&gt; yang memiliki kelas demo1</li>
    <li>Saya adalah anak terakhir dari elemen &lt;ul&gt; yang memiliki kelas demo1</li>
</ul>

Normalnya, kerangka objek tersebut akan meghasilkan tampilan seperti ini:

• Saya adalah anak pertama dari elemen <ul> yang memiliki kelas demo1
• Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki kelas demo1
• Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki kelas demo1
• Saya adalah anak terakhir dari elemen <ul> yang memiliki kelas demo1

Sekarang kita terapkan kode CSS yang akan memberikan warna biru pada elemen <li> pertama, dan akan memberikan warna merah pada elemen <li> terakhir:

ul li:first-child {color:blue;}
ul li:last-child {color:red;}

Setelah diterapkan maka akan menghasilkan tampilan seperti ini:

• Saya adalah anak pertama dari elemen <ul> yang memiliki kelas demo1
• Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki kelas demo1
• Saya bukan anak pertama/terakhir dari elemen <ul> yang memiliki kelas demo1
• Saya adalah anak terakhir dari elemen <ul> yang memiliki kelas demo1

:lang()

: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:

Taufik Nurrohman adalah lelaki paling ganteng sedunia

Taufik Nurrohman is the most handsome boy in the world

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':

q:lang(id) {color:green;}
q:lang(en) {color:orange;}

Setelah diterapkan maka akan menghasilkan tampilan seperti ini:

Taufik Nurrohman adalah lelaki paling ganteng sedunia

Taufik Nurrohman is the most handsome boy in the world

Sumber gambar: Spread Shirt