Blog Request tutorial? klik disini!

  • Macam-Macam Pseudo Classes Dalam CSS3

    Ditulis oleh: Faizal Rafik
    1656 kali dibaca
    02 Jul / 2014 19:29

    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.

    DEMO






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155