Pseudoklasy w CSS3

Pseudoklasy w CSS3 są używane do definiowania specjalnego stanu elementów HTML. Pozwalają one na stylizowanie elementów na podstawie ich stanu, bez konieczności dodawania dodatkowych klas czy identyfikatorów w HTML. Pseudoklasy mogą być stosowane do różnych celów, takich jak stylizowanie linków w zależności od ich stanu (np. odwiedzone, nieodwiedzone), zmiana wyglądu elementów przy najechaniu myszką, stylizowanie pierwszego elementu listy i wiele innych.

Przykład użycia pseudoklas

Poniżej znajduje się przykład pokazujący użycie różnych pseudoklas w CSS3 w jednym kompletnym pliku. Przykład ilustruje, jak można zastosować pseudoklasy do stylizowania linków, elementów listy, pierwszego dziecka elementu oraz reakcji na najechanie myszką.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład pseudoklas w CSS3</title>
    <style>
        /* Stylizowanie linków */
        a:link {
            color: blue; /* Kolor linków nieodwiedzonych */
        }
        a:visited {
            color: purple; /* Kolor linków odwiedzonych */
        }
        a:hover {
            color: red; /* Kolor linków przy najechaniu myszką */
        }
        a:active {
            color: yellow; /* Kolor linków w momencie kliknięcia */
        }

        /* Stylizowanie pierwszego elementu listy */
        li:first-child {
            font-weight: bold; /* Pogrubienie pierwszego elementu listy */
        }

        /* Stylizowanie elementów przy najechaniu myszką */
        .hover-effect:hover {
            background-color: lightgrey; /* Zmiana tła elementu */
        }

        /* Stylizowanie pierwszego dziecka elementu */
        p:first-of-type {
            color: green; /* Kolor pierwszego paragrafu */
        }
    </style>
</head>
<body>
    <h3>Przykład pseudoklas w CSS3</h3>
    <a href="#">Link nieodwiedzony</a><br>
    <a href="#" style="color: purple;">Link odwiedzony (symulacja)</a><br>

    <ul>
        <li>Pierwszy element listy</li>
        <li class="hover-effect">Element z efektem najechania myszką</li>
        <li>Trzeci element</li>
    </ul>

    <p>Pierwszy paragraf.</p>
    <p>Drugi paragraf.</p>
</body>
</html>

Opis przykładu

  • a:link, a:visited, a:hover, a:active: Te pseudoklasy służą do stylizowania linków w różnych stanach: nieodwiedzone, odwiedzone, najechanie myszką i aktywacja (kliknięcie).
  • li:first-child: Stosowana do stylizowania pierwszego elementu listy. W tym przypadku, pierwszy element listy jest pogrubiony.
  • .hover-effect:hover: Pokazuje, jak zmienić tło elementu przy najechaniu na niego myszką. Używane tutaj dla elementu listy z klasą .hover-effect.
  • p:first-of-type: Służy do stylizowania pierwszego paragrafu wśród rodzeństwa. Tutaj pierwszy paragraf ma zielony kolor tekstu.

Podsumowanie

Pseudoklasy w CSS3 oferują potężne narzędzia do kontrolowania wyglądu elementów HTML w zależności od ich stanu. Dzięki nim, deweloperzy mogą tworzyć bardziej dynamiczne i interaktywne interfejsy użytkownika bez potrzeby modyfikacji struktury HTML.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top