Docs/CSS/Pseudo-classes

CSS Pseudo-classes

Pseudo-class memilih elemen berdasarkan state atau posisi.

State

  • :hover — saat mouse hover
  • :focus — saat elemen difokuskan
  • :active — saat diklik
  • :visited — link yang sudah dikunjungi
  • :disabled / :enabled
  • :checked — checkbox/radio yang dicentang

Posisi

  • :first-child / :last-child
  • :nth-child(n) — ke-n
  • :nth-child(odd) / :nth-child(even)
  • :not(selector) — negasi
style.css
Try It →
.pseudo-list li {
  padding:8px 12px;
  border-radius:6px;
  margin:4px 0;
  transition:all 0.2s;
  cursor:pointer;
}
.pseudo-list li:hover {
  background:#DBEAFE;
  transform:translateX(8px);
}
.pseudo-list li:first-child {
  font-weight:bold;
  color:#6DD5C4;
}
.pseudo-list li:last-child {
  font-weight:bold;
  color:#F06D5B;
}
.pseudo-list li:nth-child(even) {
  background:#F8FAFC;
}