Selektory atrybutów w CSS 3

By /

Html CSS

Selektory atrybutów w CSS pozwalają na stosowanie stylów do elementów HTML na podstawie obecności, wartości lub części wartości atrybutów. Są one niezwykle przydatne, gdy chcemy modyfikować wygląd elementów na podstawie informacji zawartych w atrybutach, niezależnie od ich klasy, id czy hierarchii. Selektor uniwersalny, oznaczany jako *, pozwala z kolei na zastosowanie stylów do wszystkich elementów na stronie.

Selektory atrybutów

Selektory atrybutów można używać w różnych wariantach, by pasowały do elementów z określonym atrybutem, z atrybutem o dokładnej wartości, z atrybutem zaczynającym się od określonej wartości i więcej. Oto kilka przykładów:

  • [atrybut]: Stosuje style do elementów z danym atrybutem.
  • [atrybut="wartość"]: Stosuje style do elementów, gdzie atrybut ma dokładnie określoną wartość.
  • [atrybut^="wartość"]: Stosuje style do elementów, gdzie wartość atrybutu zaczyna się od podanej wartości.
  • [atrybut$="wartość"]: Stosuje style do elementów, gdzie wartość atrybutu kończy się na podaną wartość.
  • [atrybut*="wartość"]: Stosuje style do elementów, gdzie wartość atrybutu zawiera podaną wartość.

Przykład użycia selektorów atrybutów

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Selektory atrybutów i selektor uniwersalny</title>
    <style>
        /* Selektor uniwersalny */
        * {
            box-sizing: border-box;
        }
        
        /* Selektor atrybutów - wszystkie inputy typu text */
        input[type="text"] {
            background-color: #f0f0f0;
        }
        
        /* Selektor atrybutów - linki z atrybutem href zaczynającym 
           się od "https" */
        a[href^="https"] {
            color: green;
        }
        
        /* Selektor atrybutów - elementy z atrybutem data-info 
           zawierającym słowo "promo" */
        *[data-info*="promo"] {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Wpisz tekst">
    <input type="password" placeholder="Wpisz hasło">
    <a href="https://example.com">Bezpieczny link</a>
    <a href="http://example.com">Niezabezpieczony link</a>
    <div data-info="super-promo">To jest promocja!</div>
</body>
</html>

Podsumowanie

Selektory atrybutów w CSS umożliwiają bardzo precyzyjne targetowanie elementów na podstawie ich atrybutów, co jest szczególnie przydatne w przypadkach, gdy nie chcemy lub nie możemy używać klas czy identyfikatorów.

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

Powiązane artykuły

Scroll to Top