Pseudoklasy

7.1 Pseudoklasy stanu

Pseudoklasy w CSS to specjalne słowa kluczowe, które dodaje się do selektorów w celu wskazania stanu elementu lub jego pozycji w strukturze dokumentu. Pozwalają stosować style do elementów w określonych stanach lub sytuacjach, które nie mogą być określone za pomocą zwykłych selektorów.

Główne pseudoklasy:

• Pseudoklasy stanu
• Pseudoklasy strukturalne
• Pseudoklasy formularza
• Pseudoklasy nawigacyjne

Składnia:

    
      selektor:pseudoklasa {
        własność: wartość;
        własność: wartość;
      }
    
  

Pseudoklasy stanu

Te pseudoklasy używane są do stylizacji elementów w zależności od ich aktualnego stanu, na przykład przy najechaniu kursorem lub aktywnym elemencie:

• :hover — stosuje się, gdy użytkownik najeżdża kursorem na element
• :active — stosuje się, gdy element zostaje aktywowany (zwykle poprzez kliknięcie)
• :focus — stosuje się, gdy element znajduje się w fokusie (np. przy użyciu klawiatury)
• :visited — stosuje się do odwiedzonych linków
• :link — stosuje się do nieodwiedzonych linków

7.2 Pseudoklasa hover

Pseudoklasa :hover stosuje się do elementu, gdy użytkownik najeżdża na niego wskaźnikiem myszy. Często wykorzystywana do zmiany wyglądu linków i przycisków przy najechaniu.

Składnia:

    
      selektor:hover {
        własność: wartość;
        własność: wartość;
      }
    
  

Przykład:

Ten selektor zmienia kolor tekstu i podkreśla linki przy najechaniu wskaźnikiem myszy.

    
      <a href="#">Link-placeholder</a>
    
  

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

Zastosowanie:

• Poprawia interakcję z użytkownikiem (UI) poprzez wizualną informację zwrotną
• Używana do przycisków, linków i innych interaktywnych elementów

7.3 Pseudoklasa focus

Pseudoklasa :focus stosuje się do elementu, gdy otrzymuje fokus. Przykładowo, przy kliknięciu na niego lub przejściu do niego za pomocą klawisza tabulacji. Najczęściej używana do inputów i innych elementów formularzy.

Składnia:

    
      selektor:focus {
        własność: wartość;
        własność: wartość;
      }
    
  

Przykład:

Ten selektor zmienia kolor obramowania inputa i usuwa obwódkę przy otrzymaniu fokusu.

    
      <input type="text" name="text" id="text">
    
  

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

Zastosowanie:

• Poprawia dostępność (accessibility) stron internetowych
• Sprawia, że interaktywne elementy są bardziej widoczne przy fokusie

7.4 Pseudoklasa nth-child

Pseudoklasa :nth-child stosuje się do elementów na podstawie ich pozycji wśród elementów potomnych rodzica. Przyjmuje argument, który może być liczbą, słowem kluczowym lub wyrażeniem.

Składnia:

    
      selektor:nth-child(n) {
        własność: wartość;
        własność: wartość;
      }
    
  

Przykład:

Ten selektor pozwala stosować style do elementów na podstawie ich pozycji wśród rodzeństwa.

    
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
        <li>Element 5</li>
        <li>Element 6</li>
        <li>Element 7</li>
      </ul>
    
  

    
      /* Stosuje style do wszystkich nieparzystych elementów potomnych */
      li:nth-child(odd) {
          background-color: lightgray;
      }

      /* Stosuje style do wszystkich parzystych elementów potomnych */
      li:nth-child(even) {
          background-color: lightblue;
      }

      /* Stosuje style do drugiego elementu potomnego */
      li:nth-child(2) {
          color: red;
      }
    
  

Zastosowanie:

• Stylizuje wiersze tabel, elementy list i inne powtarzalne struktury
• Pozwala tworzyć zaawansowane układy i stylizacje bez dodawania dodatkowych klas

7.5 Przykłady użycia pseudoklas

    
      <button type="button">Button</button>
    
  

    
      button:hover, button:focus {
        background-color: darkblue;
        color: white;
      }
    
  

Stylizacja parzystych wierszy tabeli:

    
      <table>
        <tr>
          <th>Nazwa</th>
          <th>Ilość</th>
          <th>Cena</th>
        </tr>
        <tr>
          <td>Produkt 1</td>
          <td>5</td>
          <td>10 zł</td>
        </tr>
        <tr>
          <td>Produkt 2</td>
          <td>3</td>
          <td>15 zł</td>
        </tr>
        <tr>
          <td>Produkt 3</td>
          <td>8</td>
          <td>7 zł</td>
        </tr>
      </table>
    
  

    
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
    
  

Wykluczanie określonych elementów z ogólnego stylu:

    
      <ul>
        <li class="list-item">Element 1</li>
        <li class="list-item">Element 2</li>
        <li class="list-item">Element 3</li>
        <li class="list-item">Element 4</li>
        <li class="list-item">Element 5</li>
        <li class="list-item">Element 6</li>
        <li class="list-item">Element 7</li>
      </ul>
    
  

    
      .list-item:not(:last-child) {
        border-bottom: 1px solid #ddd;
      }