Selektor atrybutów CSS

Ustawienie stylu HTML elementów o określonych atrybutach

Możemy ustawić styl HTML elementów o określonych atrybutach lub wartościach atrybutów.

Wybieracz [attribute] CSS

[attribute] Wybieracz wybiera elementy o określonym atrybucie.

Poniższy przykład wybiera wszystkie elementy <a> z atrybutem target;

Przykład

a[target] {
  background-color: yellow;
}

Spróbuj sam!

CSS [attribute="value"] Wybieracz

[attribute="value"] Wybieracz wybiera elementy o określonym atrybucie i wartości.

Poniższy przykład wybiera wszystkie elementy <a> z atrybutem target="_blank":

Przykład

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

Spróbuj sam!

CSS [attribute~="value"] Wybieracz

[attribute~="value"] Wybieracz wybiera elementy o wartości atrybutu zawierającej określone słowo.

Poniższy przykład wybiera wszystkie elementy o atrybucie title zawierającym słowo "flower":

Przykład

[title~="flower"] {
  border: 5px solid yellow;
}

Spróbuj sam!

Powyższy przykład dopasuje elementy o następujących atrybutach: title="flower", title="summer flower" oraz title="flower new", ale nie dopasuje: title="my-flower" lub title="flowers".

CSS [attribute|="value"] Wybieracz

[attribute|="value"] Wybiera elementy o określonej wartości atrybutu.

Poniższy przykład wybiera wszystkie elementy, które mają atrybut class zaczynający się od "top":

Komentarz:Wartość musi być pełnym lub pojedynczym słowem, np. class="top" lub połączonym z myślnikiem, np. class="top-text".

Przykład

[class|="top"] {
  background: yellow;
}

Spróbuj sam!

CSS [attribute^="value"] selektor

Selektor [attribute^="value"] jest używany do wybierania elementów, które mają atrybut zaczynający się od określonej wartości.

Poniższy przykład wybiera wszystkie elementy, które mają atrybut class zaczynający się od "top":

Wskazówka:Wartość nie musi być pełnym słowem!

Przykład

[class^="top"] {
  background: yellow;
}

Spróbuj sam!

CSS [attribute$="value"] selektor

Selektor [attribute$="value"] jest używany do wybierania elementów, które mają atrybut o wartości kończącej się na określone słowo.

Poniższy przykład wybiera wszystkie elementy, które mają atrybut class kończący się na "test":

Wskazówka:Wartość nie musi być pełnym słowem!

Przykład

[class$="test"] {
  background: yellow;
}

Spróbuj sam!

CSS [attribute*="value"] selektor

Selektor [attribute*="value"] wybiera elementy, które mają wartość atrybutu zawierającą określone słowo.

Poniższy przykład wybiera wszystkie elementy, które mają atrybut class zawierający "te":

Wskazówka:Wartość nie musi być pełnym słowem!

Przykład

[class*="te"] {
  background: yellow;
}

Spróbuj sam!

Ustawienie stylu formularza

Jeśli chcesz ustawić styl formularza bez klasy lub identyfikatora, selektor atrybutu może być bardzo przydatny:

Przykład

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Spróbuj sam!

Wskazówka:Odwiedź nasz CSS tutorial formularzyDla więcej informacji na temat ustawiania stylów formularzy za pomocą CSS, zobacz.

Wszystkie wywołania selektorów CSS

Wybieracz Przykład Opis przykładu
[attribute] [target] Wybierz wszystkie elementy, które mają atrybut target.
[attribute=value] [target=_blank] Wybierz wszystkie elementy, które mają atrybut target równy "_blank".
[attribute~=value] [title~=flower] Wybierz wszystkie elementy, które mają atrybut title zawierający słowo "flower".
[attribute|=value] [lang|=en] Wybierz wszystkie elementy, które mają atrybut lang zaczynający się od "en".
[attribute^=value] a[href^="https"] Wybierz każdy element <a>, którego wartość atrybutu href zaczyna się od "https".
[attribute$=value] a[href$=".pdf"] Wybierz każdy element <a>, którego wartość atrybutu href kończy się na ".pdf".
[attribute*=value] a[href*="codew3c"] Wybierz każdy element <a>, którego wartość atrybutu href zawiera podciąg "codew3c".

Czytaj więcej

Dodatkowe książki:Wyjaśnienie wybieraczy atrybutów CSS