Setelah kita memahami tentang 3 jenis selector yang umum digunakan seperti tag selector, class selector, dan id selector, maka saatnya kita mengenal salah satu fitur powerful lainnya yaitu pseudo-class dalam CSS. Dengan menggunakan pseudo-class, kita bisa menargetkan elemen pada HTML berdasarkan Status atau kondisi spesifik, seperti ketika pengunjung mengarahkan kursor pada suatu elemen, saat input berada dalam fokus, atau saat sebuah elemen merupakan anak pertama dalam parent-nya. Dalam artikel ini, kita akan membahas tentang pengertian dari pseudo-class, contoh dari pseudo-class, dan cara penggunaanya.

Pengertian Pseudo-classes dalam CSS

Pseudo-class adalah jenis selector pada CSS yang digunakan untuk memilih elemen berdasarkan keadaan tertentu atau posisi dalam struktur dokumen yang tidak bisa dipilih hanya dengan class atau ID. Dalam penulisannya pada CSS, pseudo-class ditulis dengan menggunakan titik dua (:) serta diikuti nama pseudo-class nya. Berikut adalah contoh cara merubah warna dari sebuah link saat kursor diarahkan ke link tersebut.

a:hover {
 color: red;
}

Selector a:hover akan mengubah warna link menjadi merah saat kursor diarahkan ke link tersebut.

Beberapa Contoh Pseudo-classes Yang Sering Digunakan

Berikut adalah beberapa contoh dari penggunaan pseudo-class yang sering digunakan dalam pengembengan sebuah website.

1. :hover

Pengertian dari hover sendiri yaitu untuk memberi efek ketika pengguna mengarahkan kursor ke suatu elemeen. Berikut contoh lainnya dalam penggunaan :hover.

button {
 background-color: gray;
}

button:hover {
 background-color: red;
}

Warna latar belakang dari tombol button adalah abu-abu, ketika kita mengarahkan kursor ke elemen terseubt, maka warna latar belakang pada tombol berubah menjadi merah.

2. :active

Selector ini akan bekerja saat elemen sedang ditekan, contohnya pada sebuah link.

a:active {
 color: orange;
}

Ketika link di klik, maka warna dari link akan berubah menjadi warna orange.

3. :focus

Diguanakan untuk elemen yang menerima fokus seperti input teks yang sedang diketik.

input {
 border-color: gray;
}

input:focus {
 border-color: red;
}

Ketika kondisi teks input tidak fokus, warna default dari border adalah abu-abu. Tapi ketika teks input berada dalam kondisi fokus atau mengetik, warna dari border akan berubah menjadi merah. Hal ini sangat berguna untuk memperjelas elemen input mana yang sedang pengguna isi.

4. :first-child, :last-child, dan :nth-child

Mungkin kita perlu menargetkan elemen berdasarkan posisinya dalam urutan elemen bersaudara (sibling) dalam struktur HTML. Dengan selector ini, kita bisa mengatur style berdasarkan urutan elemen tanpa harus menambahkan class atau ID satu per satu.

• :first-child

Digunakan untuk memilih elemen yang merupakan anak pertama dari parent-nya. Berikut contoh penggunaanya.

Kode HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Kode CSS

li:first-child {
  color: red;
  font-weight: bold;
}

Pada kode diatas akan memberikan warna merah dan teks tebal hanya pada <li> pertama, karena dia adalah anak pertama dari <ul>.

• :last-child

Kebalikan dari :first-child, :last-child digunakan untuk menargetkan elemen yang merupakan anak terakhir dari parent-nya.

Kode HTML

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

Kode CSS

li:last-child {
  color: blue;
  font-style: italic;
}

Pada kode diatas akan memberikan warna biru dan teks bergaya italic hanya pada <li> terakhir, karena dia adalah anak terakhir dari <ul>.

• :nth-child(n)

Dengan menggunakan pseudo-class ini, kita memungkinkan memilih elemen anak berdasarkan nomor urutnya mulai dari 1 ke atas.

Kode HTML

<ul>
  <li>Product 1</li>
  <li>Product 2</li>
  <li>Product 3</li>
  <li>Product 4</li>
</ul>

Kode CSS

li:nth-child(2) {
  background-color: green;
}

Kode diatas akan memberi latar belakang hijau pada elemen kedua, yaitu Product 2.

Kenapa Pseudo-classes Sangat Penting?

Penggunaan pseudo-class sangat penting dalam pengembangan sebuah website karena memberikan kemampuan untuk mengatur style elemen HTML berdasarkan kondisi tertentu. Selain itu, kita dapat meningkatkan pengalaman penggunjung dan mengubah tampilan secara dinamis.

Kesimpulan

Pseudo-class pada CSS adalah metode penting dalam melakukan styling website bergaya modern. Dari membuat tombol yang interaktif hingga menyesuaikan tampilan input saat aktif. Dengan pseudo-class memberi kita kontrol visual yang lebih besar terhadap halaman website.

Terimakasih, sampai jumpa di artikel selanjutnya.