Selektor atrybutu w CSS

Selektor atrybutu w CSS służy do wybierania elementów HTML na podstawie tego, czy mają określony atrybut albo określoną wartość atrybutu. Pozwala stylizować elementy dokładniej niż zwykły selektor znacznika, klasy lub identyfikatora.

Podstawowa składnia

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

Taki zapis wybiera elementy danego typu, które posiadają wskazany atrybut.

Przykład:

input[required] {
  border: 2px solid red;
}

Ten kod wybierze pola input, które mają atrybut required.

Selektor z konkretną wartością atrybutu

Najczęściej w egzaminach pojawia się zapis:

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

Oznacza on: wybierz wszystkie elementy <a>, których atrybut target ma wartość _blank. W praktyce są to linki otwierające się w nowej karcie lub nowym oknie przeglądarki.

Inne przykłady

img[alt] {
  border: 1px solid green;
}

Wybiera obrazy mające atrybut alt.

input[type="password"] {
  background-color: lightyellow;
}

Wybiera pola formularza przeznaczone do wpisywania hasła.

Co warto zapamiętać na egzamin

• a oznacza element odnośnika HTML.
• [target="_blank"] zawęża wybór do linków z takim atrybutem.
• color: yellow; zmienia kolor tekstu, a nie tło.
• Selektor a[target="_blank"] nie dotyczy wszystkich linków, tylko tych spełniających warunek wartości atrybutu.