Selektory atrybutów CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Selektor atrybutu CSS pozwala wybrać elementy HTML na podstawie tego, czy mają określony atrybut albo konkretną wartość atrybutu. Dzięki temu można stylować tylko wybrane elementy, bez dodawania klas.

Składnia

element[atrybut] {
  właściwość: wartość;
}

Taki zapis wybiera elementy, które mają dany atrybut.

element[atrybut="wartość"] {
  właściwość: wartość;
}

Taki zapis wybiera elementy, których atrybut ma dokładnie wskazaną wartość.

Przykład z pytania

a[target="_blank"] {
  color: yellow;
}

Ten selektor oznacza: wybierz wszystkie elementy <a>, czyli linki, które mają atrybut target o wartości _blank. Następnie ustaw im żółty kolor tekstu.

Nie dotyczy to wszystkich linków, lecz tylko tych zapisanych np. tak:

<a href="https://example.com" target="_blank">Otwórz stronę</a>

Inne przykłady

input[type="text"] {
  border: 1px solid black;
}

img[alt] {
  outline: 2px solid green;
}

Pierwszy przykład styluje pola tekstowe formularza, a drugi obrazy posiadające atrybut alt.