Attribut-Selektoren

Manchmal willst du Elemente ansprechen, denen du keine Klasse geben kannst. Weil das Markup aus einem fremden System kommt, weil ein Redaktionssystem es erzeugt, oder weil es schlicht unsinnig wäre, jedem einzelnen Link von Hand etwas anzuhängen.

Für genau diese Fälle gibt es Attribut-Selektoren. Sie stehen in eckigen Klammern und fragen nach dem, was ohnehin schon im Markup steht.

01 / 05Existenz und genauer Wert

<p><a href="/impressum">Ein Link mit Ziel</a></p>
<p><a id="anker">Ein Anker ohne href</a></p>

<form>
  <input type="email" value="post@example.com">
  <input type="text" value="Freitext">
</form>

/* Existenz: hat das Element dieses Attribut überhaupt? */
a[href] {
  background-color: #dbeafe;
}

/* Genauer Wert */
input[type="email"] {
  border: 2px solid #2563eb;
}

[href] fragt nur, ob das Attribut da ist, egal mit welchem Wert. Auf der Seite ist deshalb der erste Link hell hinterlegt und der zweite nicht: der hat kein href, sondern nur ein id. Die Farbe des Textes taugt hier übrigens nicht als Beweis, blau und unterstrichen macht der Browser Links von sich aus.

Das ist nützlicher, als es klingt. Ein a ohne href ist kein Link, sondern nur ein Anker, und es verhält sich auch nicht wie einer. a[href] trifft die echten Links, a allein beide.

[type="email"] fragt nach dem genauen Wert. Der Vergleich unterscheidet dabei Groß- und Kleinschreibung: [data-tags="CSS"] trifft ein data-tags="css" nicht.

Für eine Handvoll HTML-Attribute gilt das allerdings nicht, und type gehört dazu. Der Standard schreibt vor, dass ihre Werte ohne Rücksicht auf die Schreibweise verglichen werden, [type="Email"] trifft hier also doch. Verlass dich nicht darauf, welches Attribut auf dieser Liste steht, sondern schreib die Werte so, wie sie im Markup stehen.

Die Anführungszeichen um den Wert darfst du bei einfachen Wörtern weglassen, aber tu es nicht. Sobald ein Bindestrich, eine Zahl am Anfang oder ein Leerzeichen im Wert steht, brauchst du sie, und dann hast du zwei Schreibweisen in derselben Datei.

02 / 05Anfang, Ende und Teil

Drei Varianten machen Attribut-Selektoren erst richtig brauchbar. Wer schon einmal mit Mustern gearbeitet hat, erkennt die Zeichen wieder.

<ul>
  <li><a href="https://developer.mozilla.org">Externe Seite</a></li>
  <li><a href="/handbuch.pdf">Handbuch als PDF</a></li>
  <li><a href="mailto:post@example.com">Mail schreiben</a></li>
  <li><a href="/projekte">Interne Seite</a></li>
</ul>

/* Beginnt mit */
a[href^="http"] {
  font-weight: 700;
}

/* Endet auf */
a[href$=".pdf"] {
  color: #b91c1c;
}

/* Enthält irgendwo */
a[href*="@"] {
  font-style: italic;
}

Das Dach fragt nach dem Anfang. a[href^="http"] trifft alles, was mit http beginnt, also externe Links. Ein interner Link beginnt mit einem Schrägstrich und ist damit raus. Das ist der übliche Weg, externe Links optisch zu kennzeichnen, ohne jeden davon anzufassen.

Das Dollarzeichen fragt nach dem Ende. a[href$=".pdf"] trifft Links auf PDF-Dateien. Genauso lassen sich Downloads, Bildlinks oder Archive markieren.

Der Stern fragt nach einem Teil irgendwo im Wert. a[href*="@"] trifft hier den Mail-Link. Der Stern ist der großzügigste der drei, und deshalb der, bei dem man am ehesten mehr trifft als gedacht.

Ein Detail zur Sicherheit: Diese Selektoren beschreiben nur, was gerade dasteht. Ein externer Link, der mit // statt https:// beginnt, wird von [href^="http"] nicht getroffen. Für Gestaltung ist das verschmerzbar, als Sicherheitsmerkmal taugt es nicht.

03 / 05Ein Wort aus einer Liste

<p data-tags="css layout">Trifft, weil css als eigenes Wort dasteht.</p>
<p data-tags="css-tricks">Trifft nicht, das ist ein anderes Wort.</p>
<p data-tags="html css">Trifft auch.</p>

/* Tilde-Gleich: ein ganzes Wort in einer Liste mit Leerzeichen */
[data-tags~="css"] {
  background-color: #dbeafe;
}

/* Zum Vergleich: Stern-Gleich trifft auch Wortteile */
[data-tags*="css"] {
  border-left: 3px solid #93c5fd;
  padding-left: 8px;
}

[data-tags~="css"] sucht ein ganzes Wort in einem Wert, der aus mehreren durch Leerzeichen getrennten Wörtern besteht. Genau so funktioniert intern auch der Klassenselektor: .karte ist im Grunde [class~="karte"].

Der Unterschied zum Stern ist im Beispiel gut zu sehen. Der zweite Absatz hat data-tags="css-tricks". Der Stern trifft ihn, weil css als Zeichenfolge darin vorkommt. Die Tilde trifft ihn nicht, weil css-tricks ein anderes Wort ist.

Es gibt noch eine vierte Variante, |=, die nach einem Wert oder einem Wert mit angehängtem Bindestrich sucht. Sie war für Sprachcodes wie de und de-AT gedacht und begegnet dir im Alltag praktisch nie.

04 / 05Groß- und Kleinschreibung abschalten

Attributwerte werden genau verglichen. Wenn dir das nicht passt, hängst du ein i vor die schließende Klammer.

Damit trifft a[href$=".pdf" i] auch eine Datei, die auf .PDF endet. Praktisch überall dort, wo Dateinamen von Menschen vergeben werden, also fast überall.

05 / 05Wo sie sich wirklich lohnen

Attribut-Selektoren sind kein Ersatz für Klassen. Wenn du das Markup in der Hand hast und eine Rolle ausdrücken willst, ist eine Klasse klarer und schneller.

Ihre Stärke liegt woanders: bei Attributen, die ohnehin eine Bedeutung tragen. input[type=...], a[href^=...], [disabled], [aria-current], [open]. Diese Attribute stehen nicht zur Dekoration im Markup, sie beschreiben etwas Wahres über das Element. Eine Regel daran zu hängen ist deshalb robuster als eine Klasse, die jemand vergessen kann.