CSS običajno uporablja »class« ali »id« selektorje za oblikovanje elementov. Včasih pa tega ne moremo storiti ali pa je celo bolj praktično ciljati element glede na HTML atribut.
Za to obstajajo t. i. CSS attribute selectorji. Omogočajo, da v CSS izbereš elemente glede na vrednost atributa – brez dodatnih »class« ali »id« oznak.
To je zelo uporabno pri:
- oblikovanju linkov
- označevanju zunanjih povezav
- oblikovanju elementov z data-* atributi
- ciljanju obrazcev in vnosnih polj (input)
Osnovni primer
Če želiš izbrati element, ki ima določen atribut. Ta selektor izbere vse povezave, ki imajo atribut »target«.
a[target] {
color: red;
}Druge možnosti uporabe:
- Selektor z določeno vrednostjo
- Selektor, ki vsebuje del vrednosti
- Začetek ali konec vrednosti
- Data atributi
- Označevanje zunanjih povezav
input[type="email"] {
border: 2px solid blue;
}
a[href*="pomagalnik"] {
font-weight: bold;
}
a[href^="https"] {
color: green;
}
a[href$=".pdf"] {
color: red;
}
button[data-state="active"] {
background: green;
}
a[href^="http"]::after {
content: " ↗";
}Prednosti attribute selectorjev
- Manj dodatnih class oznak.
- Bolj semantičen HTML.
- Enostavno ciljanje dinamičnih elementov.
- Zelo uporabno pri JavaScript aplikacijah ali večjih sisitemih, kjer ne moremo vplivati na kodo, imamo pa dostop do CSS.
Attribute selectorji so zelo močni z odlično podporo v brskalnikih, vendar jih moramo uporabljati premišljeno. Če jih uporabljamo za kompleksne selektorje na velikih straneh, lahko vplivajo na »performance« CSS selektorjev. Za večino drugih primerov pa so čista in elegantna rešitev.
