Spear — Learn to Code

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;
}

← Previous

Variables

Pseudo-elements