Der Attributselektor beginnt mit einer eckigen öffnenden Klammer, dem Attributsnamen, entweder folgt ein Vergleichsoperator oder ein Attributwert und einer schließenden eckigen Klammer.
Beispiele:
E[attr] (CSS2) -> Alle Elemente deren Attribut gesetzt ist, egal mit welchem Wert werden angesprochen.
td[width] { background-color: red; }
E[attr="Wert"] (CSS2) -> Alle Elemente deren Attribut gesetzt ist und genau den entsprechenden Wert besitzen werden angesprochen.
img[alt~="Foto"] { float: right; }
E[lang |="Wert"] (CSS2) -> Jedes E-Element, dessen "lang"-Attribut einen Bindestrich-geteilten Wert
aufweist, der (von links) mit "Wert" beginnt.
h1[lang|="de-AT"] { color: red }
E[attr^="Wert"] (CSS3) -> Alle E-Elemente, deren "attr"-Attribut mit "xyz" beginnt.
a[href^="http"] { border-bottom: 2px solid red }
E[attr$="Wert"] (CSS3) -> Alle E-Elemente, deren "attr"-Attribut mit "Wert" endet.
a[href$=".asp"] { font-family: courier; }
E[attr*="Wert"] (CSS3) -> Alle E-Elemente, deren "attr"-Attribut die Zeichenkette "Wert" enthält.
a[href*=".asp"] { font-family: courier; }