Selektory atrybutów CSS
Stylizuj elementy HTML za pomocą określonych atrybutów
Możliwe jest stylizowanie elementów HTML, które mają określone atrybuty lub wartości atrybutów.
CSS [atrybut] Selektor
Selektor [attribute]służy do wybierania elementów z określonym atrybutem.
Poniższy przykład wybiera wszystkie elementy <a> z atrybutem target:
Przykład
a[target] {
background-color: yellow;
}
CSS [atrybut="wartość"] Selektor
Selektor [attribute="value"]służy do wybierania elementów 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;
}
CSS [atrybut~="wartość"] Selektor
Selektor [attribute~="value"]służy do wybierania elementów, których wartość atrybutu zawiera określone słowo.
Poniższy przykład wybiera wszystkie elementy z atrybutem title, który zawiera listę słów oddzielonych spacjami, z których jedno to „kwiat”:
Przykład
[title~="flower"] {
border: 5px solid yellow;
}
Powyższy przykład dopasuje elementy o nazwach title="kwiat", title="kwiat letni" i title="kwiat nowy", ale nie title="mój-kwiat" lub title="kwiaty".
CSS [atrybut|="wartość"] Selektor
Selektor [attribute|="value"]służy do wybierania elementów o określonym atrybucie, których wartość może być dokładnie określoną wartością lub określoną wartością, po której następuje myślnik (-).
Uwaga: wartość musi być całym słowem, samodzielnie, np. class="top", lub poprzedzonym łącznikiem ( - ), np. class="top-text".
Przykład
[class|="top"] {
background: yellow;
}
CSS [atrybut^="wartość"] Selektor
Selektor [attribute^="value"]służy do wybierania elementów o określonym atrybucie, których wartość zaczyna się od określonej wartości.
Poniższy przykład wybiera wszystkie elementy z wartością atrybutu klasy, która zaczyna się od „top”:
Uwaga: wartość nie musi być całym słowem!
Przykład
[class^="top"] {
background: yellow;
}
CSS [atrybut$="wartość"] Selektor
Selektor [attribute$="value"]służy do wybierania elementów, których wartość atrybutu kończy się określoną wartością.
Poniższy przykład wybiera wszystkie elementy z wartością atrybutu klasy, która kończy się na „test”:
Uwaga: wartość nie musi być całym słowem!
Przykład
[class$="test"] {
background: yellow;
}
CSS [atrybut*="wartość"] Selektor
Selektor [attribute*="value"]służy do wybierania elementów, których wartość atrybutu zawiera określoną wartość.
Poniższy przykład wybiera wszystkie elementy z wartością atrybutu klasy, która zawiera „te”:
Uwaga: wartość nie musi być całym słowem!
Przykład
[class*="te"] {
background: yellow;
}
Stylizacja formularzy
Selektory atrybutów mogą być przydatne do stylizowania formularzy bez klasy lub identyfikatora:
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;
}
Wskazówka: odwiedź nasz samouczek formularzy CSS , aby uzyskać więcej przykładów stylów formularzy za pomocą CSS.
Wszystkie selektory atrybutów CSS
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |