Podręcznik

Pseudoklasy dynamiczne

• Stylizują elementy w zależności od interakcji użytkownika:
  • :hover – styl dla elementu, gdy użytkownik najeżdża na niego myszką,
  • :focus – styl dla elementu, który ma fokus (np. aktywne pole formularza),
  • :active – styl dla elementu w momencie klikania.

button:hover {
    background-color: lightblue;
}

Pseudoklasy strukturalne

• Pozwalają stylizować elementy na podstawie ich pozycji w dokumencie:
  • :first-child – styl dla pierwszego dziecka w danym rodzicu,
  • :last-child – styl dla ostatniego dziecka w danym rodzicu,
  • :nth-child( n ) – styl dla dziecka na określonej pozycji,
  • :nth-last-child( n ) - jak wyżej, ale pozycja jest wyliczana od ostatniego elementu, a nie od pierwszego.

li:nth-child(odd) {
    background-color: #f0f0f0;
}