Pseudoklasy strukturalne

3.1 Pseudoklasa :first-child

Pseudoklasy strukturalne w CSS pozwalają wybierać i stylizować elementy na podstawie ich lokalizacji w drzewie dokumentu. Jest to szczególnie przydatne do tworzenia bardziej precyzyjnych i szczegółowych stylów, stosowanych do określonych elementów. Rozważymy pseudoklasy :first-child, :last-child, :nth-child i :nth-of-type.

Pseudoklasa :first-child wybiera pierwszy element potomny swojego rodzica. Jest to przydatne do stylizacji pierwszego elementu w grupie jednorodnych elementów, takich jak listy lub akapity.

Składnia:

    
      selektor:first-child {
        właściwości: wartości;
      }
    
  

Przykład użycia

W tym przykładzie pierwszy element listy jest wyróżniony pogrubioną czcionką i czerwonym kolorem, a pierwszy akapit w div jest przekształcony na wielkie litery:

    
      /* Stylizacja pierwszego elementu listy */

      li:first-child {
        font-weight: bold;
        color: red;
      }

      /* Stylizacja pierwszego akapitu w div */

      div p:first-child {
        text-transform: uppercase;
      }
    
  

3.2 Pseudoklasa :last-child

Pseudoklasa :last-child wybiera ostatni element potomny swojego rodzica. Jest stosowana do stylizacji ostatniego elementu w grupie jednorodnych elementów.

Składnia:

    
      selektor:last-child {
        właściwości: wartości;
      }
    
  

Przykład użycia

W tym przykładzie ostatni element listy jest wyróżniony kursywą i niebieskim kolorem, a ostatni akapit w div jest podkreślony:

    
      /* Stylizacja ostatniego elementu listy */

      li:last-child {
        font-style: italic;
        color: blue;
      }

      /* Stylizacja ostatniego akapitu w div */

      div p:last-child {
        text-decoration: underline;
      }
    
  

3.3 Pseudoklasa :nth-child

Pseudoklasa :nth-child pozwala wybierać elementy na podstawie ich pozycji w grupie. Akceptuje argument, który określa, które elementy zostaną wybrane. Argument może być liczbą, słowem kluczowym lub wyrażeniem.

Składnia:

    
      selektornth-child(argument) {
        właściwości: wartości;
      }
    
  

Argumenty:

• Liczba: wybiera element na określonej pozycji
• Słowa kluczowe: odd (nieparzyste) i even (parzyste)
• Wyrażenie: format an+b, gdzie a i b — liczby

Przykład 1: Wybór nieparzystych elementów

W tym przykładzie stylizowane są wszystkie nieparzyste elementy listy, nadając im jasnoszare tło:

    
      /* Stylizacja nieparzystych elementów listy */

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

Przykład 2: Wybór elementów na określonej pozycji

W tym przykładzie trzeci element listy jest wyróżniony pogrubioną czcionką i zielonym kolorem:

    
      /* Stylizacja trzeciego elementu listy */

      li:nth-child(3) {
        font-weight: bold;
        color: green;
      }
    
  

Przykład 3: Użycie wyrażeń

W tym przykładzie stylizowane są co drugi element, zaczynając od pierwszego, nadając im jasnoszare tło:

    
      /* Stylizacja każdego drugiego elementu, zaczynając od pierwszego */

      li:nth-child(2n+1) {
        background-color: #e0e0e0;
      }
    
  

3.4 Pseudoklasa :nth-of-type

Pseudoklasa :nth-of-type jest podobna do :nth-child, ale wybiera elementy na podstawie ich typu wśród elementów potomnych wspólnego rodzica. To pozwala wybierać określone typy elementów, nawet jeśli nie są pierwszymi dziećmi swojego rodzica.

Składnia:

    
      selektor:nth-of-type(argument) {
        właściwości: wartości;
      }
    
  

Argumenty:

• Liczba: wybiera element na określonej pozycji wśród elementów tego samego typu
• Słowa kluczowe: odd (nieparzyste) i even (parzyste)
• Wyrażenie: format an+b, gdzie a i b — liczby

Przykład 1: Wybór parzystych akapitów

W tym przykładzie stylizowane są wszystkie parzyste akapity, nadając im jasnoszare tło:

    
      /* Stylizacja parzystych akapitów */

      p:nth-of-type(even) {
        background-color: #d0d0d0;
      }
    
  

Przykład 2: Wybór elementów na określonej pozycji wśród jednego typu

W tym przykładzie drugi nagłówek h2 jest powiększany i koloryzowany na pomarańczowy:

    
      /* Stylizacja drugiego nagłówka h2 */

      h2:nth-of-type(2) {
        font-size: 2em;
        color: orange;
      }
    
  

Przykład 3: Użycie wyrażeń

W tym przykładzie stylizowane są co trzeci element listy, zaczynając od drugiego, nadając im jasnoszare tło:

    
      /* Stylizacja każdego trzeciego elementu listy, zaczynając od drugiego */

      li:nth-of-type(3n+2) {
        background-color: #c0c0c0;
      }