Kurs HTML

Wprowadzenie: Stylizowanie na podstawie atrybutów HTML

Oprócz wybierania elementów na podstawie ich typu, klasy czy ID, CSS pozwala również na ich selekcję w oparciu o **obecność lub wartość ich atrybutów HTML**. Służą do tego **selektory atrybutów**.

Jest to bardzo potężny mechanizm, który pozwala na precyzyjne stylizowanie elementów, które niekoniecznie mają unikalne klasy czy ID, ale posiadają określone atrybuty, np. wszystkie pola formularza typu `text`, wszystkie linki prowadzące do plików PDF, czy wszystkie obrazki z określonym atrybutem `alt`.

Składnia selektorów atrybutów

Selektory atrybutów umieszcza się w nawiasach kwadratowych []. Istnieje kilka wariantów tych selektorów:

1. [atrybut] - Selekcja na podstawie obecności atrybutu.

   Wybiera wszystkie elementy, które posiadają określony atrybut, niezależnie od jego wartości.

   /* Wybierz wszystkie elementy posiadające atrybut 'target' */
   [target] {
     border: 1px solid green;
   }
   
   /* Wybierz wszystkie elementy posiadające atrybut 'disabled' */
   [disabled] {
     opacity: 0.5;
     cursor: not-allowed;
   }Kopiuj

2. [atrybut="wartosc"] - Selekcja na podstawie dokładnej wartości atrybutu.

   Wybiera wszystkie elementy, których określony atrybut ma dokładnie podaną wartość. Wartość jest wrażliwa na wielkość liter (case-sensitive) w HTML.

   /* Wybierz wszystkie inputy typu 'text' */
   input[type="text"] {
     border: 1px solid #ccc;
     padding: 5px;
   }
   
   /* Wybierz wszystkie linki z atrybutem target="_blank" */
   a[target="_blank"] {
     /* Dodaj ikonkę oznaczającą otwarcie w nowej karcie */
     padding-right: 18px;
     background: url('external-link-icon.png') no-repeat right center;
   }Kopiuj

3. [atrybut~="wartosc"] - Selekcja na podstawie wartości zawierającej określone słowo.

   Wybiera elementy, których atrybut zawiera podaną wartość jako jedno ze słów oddzielonych spacjami.

   <p class="text info important">...</p>
   <p class="text warning">...</p>Kopiuj

   /* Wybierz elementy, których atrybut 'class' zawiera słowo 'info' */
   [class~="info"] {
     color: blue;
   }
   /* Powyższe wybierze pierwszy paragraf, ale nie drugi */Kopiuj

   Uwaga: Dla atrybutu class zazwyczaj wygodniej jest używać selektora klasy (.info).

4. [atrybut|="wartosc"] - Selekcja na podstawie wartości zaczynającej się od określonego słowa (lub będącej dokładnie tym słowem), po którym może wystąpić myślnik.

   Przydatne np. do wybierania elementów na podstawie atrybutu lang.

   <p lang="en">Hello</p>
   <p lang="en-US">Hi</p>
   <p lang="pl">Cześć</p>Kopiuj

   /* Wybierz elementy z atrybutem 'lang' równym 'en' lub zaczynającym się od 'en-' */
   [lang|="en"] {
     font-style: italic;
   }
   /* Powyższe wybierze pierwsze dwa paragrafy */Kopiuj

5. [atrybut^="wartosc"] - Selekcja na podstawie wartości zaczynającej się od określonego ciągu znaków.

   Wybiera elementy, których wartość atrybutu zaczyna się od podanego ciągu.

   /* Wybierz linki, których 'href' zaczyna się od 'https://' */
   a[href^="https://"] {
     font-weight: bold; /* Pogrubienie bezpiecznych linków */
   }
   
   /* Wybierz elementy, których ID zaczyna się od 'sekcja-' */
   [id^="sekcja-"] {
     margin-top: 30px;
   }Kopiuj

6. [atrybut$="wartosc"] - Selekcja na podstawie wartości kończącej się określonym ciągiem znaków.

   Wybiera elementy, których wartość atrybutu kończy się podanym ciągiem.

   /* Wybierz linki, których 'href' kończy się na '.pdf' */
   a[href$=".pdf"] {
     /* Dodaj ikonkę PDF */
     padding-left: 20px;
     background: url('pdf-icon.png') no-repeat left center;
   }
   
   /* Wybierz obrazki, których 'src' kończy się na '.png' */
   img[src$=".png"] {
     border: 2px solid lightblue;
   }Kopiuj

7. [atrybut*="wartosc"] - Selekcja na podstawie wartości zawierającej określony ciąg znaków.

   Wybiera elementy, których wartość atrybutu zawiera podany ciąg znaków w dowolnym miejscu.

   /* Wybierz linki, których 'href' zawiera słowo 'example' */
   a[href*="example"] {
     color: green;
   }
   
   /* Wybierz elementy, których klasa zawiera ciąg 'button' (np. 'button', 'button-primary', 'my-button') */
   [class*="button"] {
     cursor: pointer;
   }Kopiuj

Można również łączyć selektor atrybutu z innymi selektorami (np. typu, klasy) dla większej precyzji:

/* Wybierz tylko inputy typu 'submit' */
input[type="submit"] {
  background-color: blue;
  color: white;
}

/* Wybierz tylko linki z klasą 'external' i atrybutem target="_blank" */
a.external[target="_blank"] {
  /* ... */
}Kopiuj

Specyficzność selektora atrybutu

Selektor atrybutu (we wszystkich swoich wariantach) ma taką samą specyficzność jak selektor klasy i pseudoklasa. W notacji specyficzności (A, B, C, D), selektor atrybutu ma wartość (0, 0, 1, 0).

• Jest bardziej specyficzny niż selektor typu (0,0,0,1) i selektor uniwersalny (0,0,0,0).
• Jest mniej specyficzny niż selektor ID (0,1,0,0).
• Ma taką samą specyficzność jak selektor klasy (.klasa) i pseudoklasa (:hover). W przypadku konfliktu między nimi decyduje kolejność w arkuszu CSS.

Zastosowania i dobre praktyki

• Stylizowanie formularzy: Bardzo przydatne do stylizowania różnych typów pól <input> (np. [type="text"], [type="email"], [type="checkbox"]) lub pól wymaganych ([required]).
• Stylizowanie linków: Umożliwia odróżnienie linków zewnętrznych ([target="_blank"]), linków do określonych typów plików ([href$=".pdf"]) czy linków do bezpiecznych stron ([href^="https://"]).
• Stylizowanie na podstawie stanu: Wybieranie elementów nieaktywnych ([disabled]).
• Alternatywa dla klas: Czasem mogą zastąpić potrzebę dodawania specjalnych klas, jeśli element ma już odpowiedni atrybut (np. stylizowanie na podstawie [data-*]).
• Wydajność: Bardziej złożone selektory atrybutów (szczególnie te z dopasowaniem podciągu, jak *=) mogą być mniej wydajne niż proste selektory typu czy klasy, zwłaszcza na dużych stronach. Używaj ich z rozwagą tam, gdzie są naprawdę potrzebne.