Pseudoklasy stanowe

2.1 Pseudoklasa :hover

Pseudoklasy stanowe pozwalają na aplikowanie stylów do elementów na podstawie ich interakcji z użytkownikiem lub ich obecnego stanu. Te pseudoklasy są często używane do poprawy interfejsu użytkownika, dostarczając wizualne sprzężenie zwrotne na działania użytkownika.

Pseudoklasa :hover jest stosowana do elementu, gdy użytkownik najeżdża na niego kursorem myszy.

Składnia:

    
      selektor:hover {
        właściwości: wartości;
      }
    
  

Przykład:

W tym przykładzie link zmienia kolor i dodaje podkreślenie przy najechaniu, a przycisk zmienia kolor tła i tekstu.

    
      /* Stylizacja linku przy najechaniu */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Stylizacja przycisku przy najechaniu */

      button:hover {
        background-color: #3498db;
        color: white;
      }
    
  

2.2 Pseudoklasa :focus

Pseudoklasa :focus jest stosowana do elementu, gdy uzyskuje on fokus, na przykład przy kliknięciu elementu formularza lub przejściu do niego za pomocą klawisza Tab.

Składnia:

    
      selektor:focus {
        właściwości: wartości;
      }
    
  

Przykład:

W tym przykładzie pole tekstowe zmienia kolor obramowania i usuwa kontur przy fokusu, a pole tekstu zmienia kolor tła.

    
      /* Stylizacja pola tekstowego przy fokusie */

      input:focus {
        border-color: blue;
        outline: none;
      }

      /* Stylizacja pola tekstu przy fokusie */

      textarea:focus {
        background-color: #f0f0f0;
      }
    
  

2.3 Pseudoklasa :active

Pseudoklasa :active jest stosowana do elementu w momencie jego aktywacji przez użytkownika, na przykład przy kliknięciu przycisku myszy. Ta pseudoklasa jest często używana do tworzenia wizualnego sprzężenia zwrotnego przy kliknięciu na elementy interfejsu.

Składnia:

    
      selektor:active {
        właściwości: wartości;
      }
    
  

Przykład:

W tym przykładzie link zmienia kolor w momencie kliknięcia, a przycisk zmienia kolor tła i trochę się kurczy, tworząc efekt kliknięcia.

    
      /* Stylizacja linku w momencie kliknięcia */

      a:active {
        color: green;
      }

      /* Stylizacja przycisku w momencie kliknięcia */

      button:active {
        background-color: #2980b9;
        transform: scale(0.98);
      }
    
  

2.4 Pseudoklasa :visited

Pseudoklasa :visited jest stosowana do linków, które użytkownik już odwiedził. Pozwala stylizować odwiedzone linki w sposób odmienny od nieodwiedzonych.

Składnia:

    
      selektor:visited {
        właściwości: wartości;
      }
    
  

Przykład

W tym przykładzie odwiedzony link zmienia kolor na purpurowy, aby różnić się od nieodwiedzonych linków:

    
      /* Stylizacja odwiedzonego linku */

      a:visited {
        color: purple;
      }
    
  

2.5 Kombinowanie pseudoklas

Pseudoklasy stanowe można łączyć w celu stworzenia złożonych interaktywnych stylów. Na przykład można ustawić różne style dla linków w zależności od ich stanu.

Przykład pełnej realizacji

W tym przykładzie stylizacja linków zmienia się w zależności od ich stanu: podstawowy stan, odwiedzone linki, linki przy najechaniu i linki w momencie kliknięcia:

    
      /* Podstawowy styl dla linków */

      a {
        color: blue;
        text-decoration: none;
      }

      /* Stylizacja odwiedzonego linku */

      a:visited {
        color: purple;
      }

      /* Stylizacja linku przy najechaniu */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Stylizacja linku w momencie kliknięcia */

      a:active {
        color: green;
      }