Pseudo Class

12:35 AM

Pseudo class digunakan untuk menentukan style berdasarkan posisi atau keadaan suatu elemen HTML. Contoh elemen yang memiliki pseudo class adalah tag <a>. Tag <a> memiliki empat keadaan yaitu link, visited, hover dan active. Dengan menggunakan pseudo class kita bisa mengubah tampilan tiap keadaan tersebut. Selain itu, kita bisa membuat elemen HTML selain tag <a> untuk berlaku layaknya tag <a> atau tag lain.

Untuk saat ini, yang akan saya bahas secara rinci hanya pseudo class tertentu saja yang digunakan untuk tag <a>. Kalian mungkin akan membutuhkan pseudo class kalau ingin mengubah template blogger, wordpress atau halaman website kalian. Dengan menggunakan pseudo class, link atau tombol di halaman website akan menjadi lebih menarik.

Pseudo Class untuk Link

Beberapa pseudo class digunakan untuk mewakili keadaan dari link seperti dilewati, ditekan, sudah dikunjungi, dan tidak diapa-apakan. Walaupun terkait dg link. Pseudo class tersebut juga bisa digunakan pada elemen lainnya. Berikut ini adalah beberapa pseudo class yang biasa digunakan untuk hyperlink atau tag <a>.
  1. :link => keadaan awal sebelum diklik dan dilewati
  2. :active => keadaan saat diklik
  3. :hover => keadaan saat dilewati
  4. :visited => link yang sudah dikunjungi
Visited hanya digunakan pada tag <a> karena tidak ada tag lain yang punya keadaan yang sama. Pseudo class lainnya yang ada di atas bisa digunakan pada elemen HTML lain yang terlihat di halaman. Itu karena pseudo class tersebut terkait dengan gerakan dan penekanan mouse.

Semua pseudo class diawali dengan titik dua (:), dan ditulis setelah nama properti CSS. Pseudo class tidak hanya digunakan untuk elemen yang "bawaannya" memiliki pseudo class tersebut. Walaupun :hover, dan :active sebenarnya menyatakan keadaan tag <a>, tapi beberapa tag lain bisa menggunakan pseudo class tersebut.

Selanjutnya, kita akan mencoba langsung penggunaan pseudo class dalam CSS dan kode HTML. Pertama, kita akan pelajari penggunaan :link, :visit, :hover dan :active; pada tag <a>. Berikut ini adalah contoh kode HTML-nya.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        a:link{
            color:red;
        }
   
        a:visited{
            color:green;
        }
                    a:hover{
                        color:yellow;
                    }
                    a:active{
                        color:blue;
                    }
    </style>
</HEAD>
<BODY>
    <a href = "http://bahasa-bahasa.com">Belajar HTML</a><br />
    <a href="http://codelogi.com">Belajar HTML</a> 
</BODY>
</HTML>
Kalau kalian mengeksekusi kode HTML di atas, saat link dilewati, diklik dan dijalankan; warna awal link seharusnya adalah merah. Saat dilewati pointer mouse (hover) warnanya adalah kuning, dan saat diklik (active) warnanya biru. Perbedaan hover dan active mungkin tidak akan terlalu jelas terlihat pada perangkat dengan layar sentuh. Perbedaannya baru akan terlihat saat menggunakan mouse. Untuk ":visited", efeknya baru akan bisa dilihat setelah tombol pernah diklik di browser atau saat halaman yang pada link sudah pernah dikunjungi.

Untuk mendapatkan hasil maksimal dari elemen HTML yang sama, :link dan :visited sebaiknya dideklarasikan atau ditulis sebelum :hover. Sedangkan :active sebaiknya dideklarasikan setelah hover. Jika pseudo class tidak dideklarasikan bersama dengan pseudo class lain untuk tag yang sama, urutannya tentu saja bisa diabaikan.

Pseudo Class Lainnya

Selain pseudo class yang sudah saya sebutkan, masih banyak pseudo class lainnya. Pseudo class lain umumnya bisa digunakan untuk elemen HTML berbentuk teks berdasarkan pola tertentu. Pseudo class ada juga yang khusus untuk digunakan pada input. Beberapa pseudo class tersebut, di antaranya :

  1. :not(selector) => selain selector dalam kurung
  2. :first-child => child pertama
  3. :last-child => child terakhir
  4. :nth-child(n) => child ke-n; n bisa diganti dengan angka, even atau odd.
  5. :nth-last-child(n) => child ke-n dari ujung
  6. :first-of-type => elemen pertama dari tipe tag yang dideklarasikan mendahului pseudo class tersebut.
  7. :last-of-type => elemen terakhir dari tipe tag yang dideklarasikan mendahului pseudo class tersebut.
  8. :nth-of-type(n) => elemen ke-n dari tipe tag yang dideklarasikan mendahului pseudo class tersebut.
  9. :nth-last-of-type(n) => elemen ke-n dari akhir dari tipe tag yang dideklarasikan mendahului pseudo class tersebut.
  10. :only-of-type => hanya tipe yg dideklarasikan
  11. :focus => saat elemen mendapatkan fokus karena penekanan mose atau tab. Umumnya digunakan pada input dan tombol.
Selai focus, pseudo class di atas akan sangat berguna terutama untuk tag <div>, <p> dan tag lain yang berisi teks. Untuk semua contoh di atas saya akan langsung berikan contoh cara penggunaannya. Tentang kegunaannya, coba analisa sendiri.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        :not(h2){
            color : red;
        }
        p:first-child{
            color : green;
        }
        .ortu p:last-child{
            color : blue;
        }
        .ortu p:nth-child(3){
            color : yellow;
        }
        .ortu p:nth-last-child(3){
            color : magenta;
        }
        h2:first-of-type{
            color : cyan;
        }
        h2:last-of-type{
            color : brown;
        }
        p:nth-of-type(2){
            color : purple;
        }
        p:nth-last-of-type(2){
            color : grey;
        }
        h1:only-of-type{
            text-decoration : underline;
            font-stlyle : italic;
        }
   
        p:nth-child(odd){
            text-decoration : underline;
        }
    </style>
</HEAD>
<BODY>
    <h2>Judul</h2>
    <div class="ortu">
        <p>
            isi pertama
        </p>
        <p>
            isi kedua
        </p>
        <p>
            isi ketiga
        </p>
        <p>
           isi keempat
        </p>
        <p>
            isi kelima
        </p>
        <p>
            isi keenam
        </p>
        <p>
            isi ketujuh
        </p>
        <p>
            isi kedelapan
        </p>
    </div>
    <h2>terakhir</h2>
    <h1>Selesai</h1>
</BODY>
</HTML>

Ketik, simpan, jalankan dan lihat hasilnya! Setelah itu, coba ubah, simpan dan jalankan lagi! Ulangi hingga kalian cukup paham kegunaan dari masing-masing baris! Semangat!!!

Subscribe to: Post Comments (Atom)