Macam-Macam Pseudo Classes Dalam CSS3

Ditutorial kali ini saya ingin membahas tentang macam-macam Pseudo Classes yang terdapat didalam CSS3. Pseudo Classes adalah beberapa efek khusus yang ditambahkan pada Selector. Untuk menggunakan efek ini kalian tidak perlu menggunakan Javascript atau Script lainnya cukup kalian tambahkan didepan selector yang ingin kalian beri efek dan jangan lupa tambahkan titik dua (:) setelah selector atau sebelum Pseudo Classes. Nah dibawah ini adalah beberapa Pseudo Classes yang ada di CSS3 :

:link

Pseudo Classes ini berfungsi untuk menambahkan efek khusus untuk Link yang belum dikunjungi oleh user. Contoh penggunaannya seperti gambar dibawah ini :

:visited

Fungsi dari Pseudo Classes ini adalah kebalikan dari Pseudo Classes :link dimana untuk menambahkan efek khusus pada link yang sudah pernah dikunjungi oleh usre. Contoh penggunaannya seperti gambar dibawah ini :

:hover

Pseudo Classes berikut berfungsi untuk memberikan efek khusus apabila kita arahkan kursor ke link tersebut. Pseudo Classes ini termasuk Pseudo Classes yang sering digunakan. Contoh penggunaannya seperti gambar dibawah ini :

:active

Pseudo Classes ini aktif saat kita mengklik sebuah link, jadi saat kita klik link tersebut baru akan terlihat efeknya. Contohnya seperti gambar dibawah ini :

:focus

Efek pada Pseudo Classes :focus biasanya digunakan untuk menembahkan efek pada elemen input (masukkan), jadi saat kita ingin mengetik didalam sebuah inputan, background dari inputan tersebut akan berubah warnanya. Contoh penggunaannya seperti gambar dibawah ini :

:first-child

Pseudo Classes ini berfungsi untuk memberikan efek khusus pada elemen pertama dari elemen lainnya. Jadi misalkan didalam pembungkus elemen <div> terdapat 2 buah elemen <p> maka yang akan mendapatkan efek adalah elemen <p> yang pertama. Contoh penggunaannya seperti gambar dibawah ini :

:lang

Pseudo Classes :lang berfungsi untuk membuat sebuah penyeleksi berdasarkan pengaturan Bahasa pada tag tertentu. Contohnya Bahasa Perancis biasanya menggunakan kurung sudut (<>) untuk menandakan sebuah tujuan, sedangkan Bahasa inggris biasanya menggunakan tanda kutip (‘ ’),  Contoh penggunaannya seperti gambar dibawah ini :

Nah itulah macam-macam Pseudo Classes yang terdapat pada CSS3. Jadi inti dari fungsi Pseudo Classes dalam CSS3 adalah untuk memberikan efek pada beberapa selector.

Sekian dulu tutorial dari saya semoga tutorial ini bermanfaat untuk kalian semua. Sampai ketemu ditutorial berikutnya. Terima Kasih.