3. CSS3 - język opisu wyglądu

3.5. Selektory atrybutów


CSS3 umożliwia wybieranie elementów do stylizowania na podstawie ich atrybutów. Poniżej zamieszczono kilka przykładowych selektorów.

Selektor [attr]
  • Wybiera elementy posiadające dany atrybut.
input[type] {
    border: 1px solid blue;
}
Selektor [attr="value"]
  • Wybiera elementy o określonej wartości atrybutu.
input[type="text"] {
    background-color: yellow;
}
Selektor [attr^="value"]
  • Wybiera elementy, których wartość atrybutu zaczyna się od określonego ciągu.
a[href^="https://"] {
    color: green;
}
Selektor [attr$="value"]
  • Wybiera elementy, których wartość atrybutu kończy się określonym ciągiem.
a[href$=".pdf"] {
    text-decoration: underline;
}

Lektura uzupełniająca: W3Schools / CSS Attribute Selectors.