Tutorial Belajar CSS Bagian 15 : Cara Menggunakan Pseudo Class di CSS

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 14 : Cara Menggunakan Properti Z-Index di CSS. Selanjutnya, kita akan mempelajari cara menggunakan pseudo class di CSS.

Pseudo class pada CSS digunakan untuk menambahkan efek khusus ke beberapa selector. Struktur kode sederhana untuk pseudo-class adalah sebagai berikut :

selector:pseudo-class {property: value}

Class CSS juga dapat digunakan pada pseudo class :

selector.class:pseudo-class {property: value}

Nilai pseudo-class yang paling umum digunakan adalah sebagai berikut :

No.Nilai & Deskripsi
1:link
Class ini digunakan untuk menambahkan gaya khusus ke link yang belum dikunjungi.
2:visited
Class ini digunakan untuk menambahkan gaya khusus ke link yang sudah dikunjungi.
3:hover
Class ini digunakan untuk menambahkan gaya khusus ke elemen saat Anda mengarahkan mouse di atasnya.
4:active
Class ini digunakan untuk menambahkan gaya khusus ke elemen aktif.
5:focus
Class ini digunakan untuk menambahkan gaya khusus ke elemen yang ingin kita fokuskan.
6:first-child
Class ini digunakan untuk menambahkan gaya khusus ke elemen yang merupakan anak pertama dari beberapa elemen lainnya.
7:lang
Class ini digunakan untuk menentukan bahasa yang akan digunakan dalam elemen tertentu.

Saat mendefinisikan pseudo-class dalam blok <style> … </style>, hal-hal berikut harus diperhatikan :

  • a: hover HARUS digunakan pertama sebelum :link dan a: dikunjungi dalam penulisan kode CSS agar efektif.
  • a: active HARUS digunakan setelah :hover dalam penulisan kode CSS agar efektif.
  • Nama pseudo class tidak membedakan huruf besar dan kecil.
  • Pseudo class tidak sama dengan class pada CSS, tetapi dapat digabungkan.

Pseudo-class :link

Contoh berikut menunjukkan cara menggunakan pseudo-class : link untuk mengatur warna link. Nilai yang digunakan dapat berupa nama warna apa pun dalam format apa pun yang valid.

<html>
   <head>
      <style type = "text/css">
         a:link {color:green}
      </style>
   </head>

   <body>
      <a href = "#">Link berwarna hijau </a>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Pseudo-class :visited

Berikut ini adalah contoh cara penggunaa pseudo-class :visited untuk menunjukka bahwa sebuah link sudah pernah dikunjungi sebelumnya.

Nilai yang biasanya digunakan dapat berupa nama warna apa pun dalam format apa pun yang valid.

<html>
   <head>
      <style type = "text/css">
         a:visited {color: red}
      </style>
   </head>

   <body>
      <a href = "#">Setelah diklik, link ini akan berwarna merah </a>
   </body>
</html>

Browser akan menampilkan hasil sebegai berikut. Setelah Anda mengklik tautan ini, link akan berubah warna menjadi merah.

Pseudo-class :hover

Contoh berikut menunjukkan cara menggunakan pseudo-class :hover untuk mengubah warna tautan saat kita mengarahkan penunjuk mouse ke tautan itu.

Nilai yang biasanya digunakan dapat berupa nama warna apa pun dalam format apa pun yang valid.

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "#">Bawa mouse ke sini </a>
   </body>
</html>

Kode ini akan menghasilkan tautan berikut. Sekarang, silahkan arahkan mouse ke tautan ini dan Anda akan melihat bahwa link akan berubah warna menjadi kuning.

Pseudo-class :active

Contoh berikut menunjukkan cara menggunakan pseudo-class :active untuk mengubah warna tautan aktif. Nilai yang digunakan dapat berupa nama warna apa pun dalam format apa pun yang valid.

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "#">Klik link ini </a>
   </body>
</html>

Browser akan menampilkan hasil link seperti berikut. Saat pengguna mengkliknya, warnanya berubah menjadi merah muda.

Pseudo-class :focus

Contoh berikut menunjukkan cara menggunakan pseudo-class :focus untuk mengubah warna tautan fokus. Nilai yang biasanya digunakan dapat berupa nama warna apa pun dalam format apa pun yang valid.

<html>
   <head>
      <style type = "text/css">
         input:focus {color: #0000FF}
      </style>
   </head>

   <body>
        <form action=”register.php” method=get>
                <p>Nama : <input type=”text” name=”nama”></p>
		<p>Kelas : <input type=”text” name=”kelas”></p>
        </form>
   </body>
</html>

Kode ini akan menghasilkan kolom input berikut. Silahkan pilih salah satu kolom, kolom yang Anda fokuskan akan berwarna orange.

Ketika Anda berpindah kolom input, maka warna kolom akan berubah hanya pada kolom yag Ada fokuskan saja.

Pseudo-class: first-child

Pseudo-class: first-child mencocokkan elemen yang merupakan turunan pertama dari elemen lain dan menambahkan gaya khusus ke elemen tersebut yang merupakan turunan pertama dari beberapa elemen lainnya.

Misalnya, untuk membuat indentasi paragraf pertama dari semua elemen <div>, Anda dapat menggunakan definisi ini :

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>
   
      <div>
         <p>Paragraph pertama dalam div. Paragraph ini akan di indented</p>
         <p>Paragraph kedua dalam div. Paragraph ini tidak akan di indented</p>
      </div>
      <p>Parapgraph ini tidak cocok sebagai first-child dari tag div dalam dokumen HTML ini</p>
      
      <div>
         <h3>Heading</h3>
         <p>Ini adalah paragraph pertama di dalam tag div. Paragraph ini tidak akan terpengaruh.</p>
      </div>
      
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini membantu Anda untuk mempelajari cara menggunakan pseudo class di CSS untuk memberi efek pada elemen HTML.

Artikel Lainnya

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0