Selektory atrybutów

Selektory atrybutów w CSS3 pozwalają stylizować elementy HTML na podstawie wartości ich atrybutów. Jest to potężne narzędzie, które umożliwia precyzyjne targetowanie elementów bez konieczności dodawania dodatkowych klas czy identyfikatorów. W tej lekcji przyjrzymy się różnym typom selektorów atrybutów i ich zastosowaniu.

Przykład kompletnego kodu

Poniżej znajduje się przykład kodu HTML i CSS ilustrujący użycie różnych selektorów atrybutów. W tym przykładzie pokazujemy, jak stylizować linki (<a>), obrazy (<img>) i pola formularza (<input>) w zależności od ich atrybutów.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selektory atrybutów w CSS3</title>
    <style>
        /* Stylizowanie linków na podstawie atrybutu 'href' */
        a[href$=".pdf"] {
            color: red; /* Linki do plików PDF będą czerwone */
        }
        
        /* Stylizowanie obrazów na podstawie atrybutu 'alt' */
        img[alt~="flower"] {
            border: 2px solid green; /* Obrazy z 'flower' w 'alt' mają zieloną ramkę */
        }
        
        /* Stylizowanie inputów typu 'text' */
        input[type="text"] {
            background-color: lightblue; /* Tło pola tekstowego jest jasnoniebieskie */
        }
        
        /* Selektor atrybutu z użyciem prefiksu */
        a[href^="https"] {
            font-weight: bold; /* Linki prowadzące do stron HTTPS są pogrubione */
        }
        
        /* Selektor atrybutu z użyciem podciągu */
        input[value*="user"] {
            border-color: purple; /* Pola formularza zawierające 'user' w wartości mają fioletową ramkę */
        }
    </style>
</head>
<body>
    <a href="document.pdf">Pobierz PDF</a><br>
    <a href="https://example.com">Odwiedź naszą stronę</a><br>
    
    <img src="flower.jpg" alt="Beautiful flower">
    <img src="landscape.jpg" alt="Mountain landscape">
    
    <form>
        <input type="text" value="Username"><br>
        <input type="text" value="user@example.com"><br>
        <input type="submit" value="Wyślij">
    </form>
</body>
</html>

Opis selektorów atrybutów

  • a[href$=".pdf"] – selektor ten wybiera wszystkie elementy <a> z atrybutem href kończącym się na .pdf, co pozwala na specjalne stylizowanie linków do plików PDF.
  • img[alt~="flower"] – selektor wybiera obrazy (<img>), których atrybut alt zawiera słowo flower. Używa się tego, aby dodać specyficzne style dla obrazów opisanych określonymi słowami.
  • input[type="text"] – stylizuje wszystkie pola tekstowe (<input> z atrybutem type="text"), umożliwiając np. zmianę tła pola tekstowego.
  • a[href^="https"] – selektor wybiera linki (<a>), których atrybut href zaczyna się od https, co jest przydatne do wyróżnienia linków prowadzących do bezpiecznych stron.
  • input[value*="user"] – wybiera elementy <input>, których atrybut value zawiera ciąg znaków user, umożliwiając np. dodanie specjalnej ramki dla pól z określoną wartością.

Podsumowanie

Selektory atrybutów w CSS3 oferują szerokie możliwości do stylizowania elementów HTML na podstawie wartości ich atrybutów. Pozwalają one na bardziej precyzyjne i elastyczne definiowanie stylów bez potrzeby modyfikacji struktury HTML. Dzięki selektorom atrybutów, możemy dokładniej targetować elementy do stylizacji, co jest szczególnie przydatne w przypadkach, gdy pracujemy z elementami, które mają określone atrybuty charakterystyczne dla ich funkcji lub zawartości.

Selektory atrybutów są niezastąpionym narzędziem w arsenale każdego front-end developera, pozwalającym na tworzenie bardziej interaktywnych i dostosowanych do użytkownika interfejsów. Umożliwiają one także łatwiejszą współpracę z gotowymi bibliotekami i frameworkami, bez konieczności ingerencji w ich strukturę kodu źródłowego.

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