Wprowadzenie do pseudoklas

1.1 Pseudoklasy

Pseudoklasy w CSS — to specjalne słowa kluczowe, które dodaje się do selektorów, aby określić ich stan lub pozycję w drzewie dokumentu. Pozwalają na stylizowanie elementów na podstawie ich stanu lub relacji z innymi elementami bez konieczności dodawania klas lub identyfikatorów w kodzie HTML.

Podstawowe koncepcje pseudoklas

1. Określenie stanu elementu:
   • Pseudoklasy mogą wskazywać na stan elementu, taki jak najechanie myszą, fokus lub aktywacja
2. Określenie pozycji elementu:
   • Pseudoklasy mogą wskazywać na pozycję elementu względem jego rodzica lub innych elementów, takich jak pierwszy lub ostatni element
3. Specjalne przypadki i logiczne grupy:
   • Pseudoklasy mogą także określać specjalne przypadki, takie jak pierwszy element typu lub nieparzysty/parzysty element

Jak używać pseudoklas

Pseudoklasy dodaje się do selektora przy użyciu dwukropka (:). Mogą być używane zarówno z selektorami elementów, jak i z klasami, identyfikatorami i innymi selektorami.

Składnia:

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

Przykłady użycia

1. Selektor elementu z pseudoklasą

W tym przykładzie wszystkie pierwsze akapity (<p>) wewnątrz swoich elementów nadrzędnych będą pogrubione:

    
      p:first-of-type {
        font-weight: bold;
      }
    
  

2. Selektor klasy z pseudoklasą

W tym przykładzie tło wszystkich elementów z klasą .button stanie się niebieskie przy najechaniu kursorem myszy:

    
      .button:hover {
        background-color: blue;
      }
    
  

3. Selektory kombinowane z pseudoklasami

W tym przykładzie wszystkie parzyste akapity (<p>) wewnątrz elementów z klasą .container będą czerwone:

    
      .container > p:nth-child(2n) {
          color: red;
      }
    
  

1.2 Przykłady pseudoklas i ich zastosowanie

1. Pseudoklasy określające stan

Pseudoklasy określające stan elementu pozwalają na zmianę jego stylizacji w zależności od interakcji użytkownika lub stanu elementu.

    
      a:link {
        color: blue;
      }

      a:visited {
        color: purple;
      }

      a:hover {
        color: red;
      }

      a:active {
        color: green;
      }
    
  

2. Pseudoklasy określające pozycję

Pseudoklasy określające pozycję elementu pozwalają na stosowanie stylów do elementów w zależności od ich umiejscowienia w strukturze DOM.

    
      li:first-child {
          font-style: italic;
      }

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

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

      li:nth-child(even) {
          background-color: #ffffff;
      }
    
  

3. Pseudoklasy dla logicznych grup

Te pseudoklasy pozwalają na stylizowanie elementów na podstawie ich logicznych grup lub typów.

    
      input:checked {
        background-color: yellow;
      }

      input:disabled {
        background-color: grey;
      }

      input:enabled {
        background-color: white;
      }