Pelajari cara menggunakan pseudo-class seperti :hover, :first-child, dan lainnya untuk menargetkan elemen berdasarkan status atau posisi.

CSS Pseudo-classes

Pseudo-class memungkinkan kamu untuk menargetkan elemen berdasarkan state atau posisi spesifik tanpa menambahkan class secara manual.

Contoh Pseudo-class Umum

1. `:hover`

Menargetkan elemen saat pointer berada di atasnya.

<style>
  button:hover {
    background-color: green;
    color: white;
  }
</style>
 
<button>Hover saya</button>

2. `:first-child`

Menargetkan elemen pertama dalam parent-nya.

<style>
  p:first-child {
    font-weight: bold;
  }
</style>
 
<div>
  <p>Ini paragraf pertama</p>
  <p>Ini paragraf kedua</p>
</div>

3. `:last-child`

Menargetkan elemen terakhir dalam parent-nya.

<style>
  li:last-child {
    color: red;
  }
</style>
 
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

4. `:nth-child(n)`

Menargetkan elemen berdasarkan urutan ke-n dalam parent-nya.

<style>
  li:nth-child(2) {
    background-color: yellow;
  }
</style>
 
<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
  <li>Item D</li>
</ul>

5. `:checked`

Menargetkan input yang dalam keadaan dicentang.

<style>
  input:checked + label {
    font-weight: bold;
  }
</style>
 
<input type="checkbox" id="cb" />
<label for="cb">Saya dicentang</label>

Ringkasan Pseudo-class Umum

Pseudo-class	Fungsi
`:hover`	Saat elemen disentuh cursor
`:first-child`	Elemen pertama dalam parent-nya
`:last-child`	Elemen terakhir dalam parent-nya
`:nth-child(n)`	Elemen ke-n dalam parent-nya
`:checked`	Input yang dicentang (checkbox/radio)
`:focus`	Saat elemen dalam keadaan aktif diketik
`:disabled`	Elemen input yang nonaktif

CSS Pseudo-classes

On this page