Attributselektor – für CSS-Anweisungen gezielt Attribute auswählen

Die bisher von uns genutzten ID- und Klassenselektoren sind zwar hilfreich, aber viele Aufgaben können einfacher über den Attributselektor in CSS gelöst werden.

Zur Erinnerung: HTML-Befehlen können (und müssen teilweise) durch Attribute ergänzt werden. Auf diese Attribute wollen wir mit CSS Einfluss nehmen.

Unser HTML-Befehl für einen Link hat folgenden Aufbau:

<a href="https://www.php-kurs.com/">zum PHP lernen</a>

Diesem externen Link (zur Schwesterseite vom HTML-Seminar) können wir das Attribut target="_blank" mitgeben. Das Attribut hat die Funktion, dass der Browser einen neuen Tab/Instanz öffnet. Und genau auf dieses Attribut können wir einfach über den Attributselektor zugreifen. Dazu gibt es noch mehrere Möglichkeiten.

Der Attributselektor wird in eckige Klammern gepackt. Diese erreicht man unter Windows über die Tastenkombination ALT GR + 8 bzw. ALT GR + 9 und beim Mac über die Tastenkombination ALT + 5 und ALT + 6.

Bei unseren CSS-Anweisungen können wir nun auf den Attributnamen direkt zugreifen – später genauso auf Attributwerte.

a[target] {
    background-color: orange;
}

Einsatz in der Praxis

Oft möchte man externe Link entsprechend kennzeichnen. Hier bietet sich ein typischer kleiner Pfeil raus aus einem Kästchen an.

a[target] {
    background: url(bilder/extern-link.gif) no-repeat;
    padding-left: 20px;
}

Über die Anweisung padding-left wird der entsprechende Platz für die Hintergrundgrafik geschaffen, die dann einmal über background:url pro Link, der das Attribut „target“ nutzt, angezeigt wird.

Und als Ausgabe im Browser erscheint dann

Wer das Beispiel nachbauen möchte, benötigt die Grafik mit dem Pfeil im Kästchen. Diese kann heruntergeladen werden unter der URL:
https://www.html-seminar.de/bilder/extern-link.gif

Präzise Steuerung des Attributselektors

Wir können auch den Attributwert mit einbeziehen. In unserem obigen Beispiel target="_blank" mit dem externen Link wäre dann der Attributwert _blank.

Und genau diesen können wir exakt ansprechen über CSS:

a[target="_blank"] {
    background: url(bilder/extern-link.gif) no-repeat;
    padding-left: 20px;
}

Präzise unpräzise Selektion

Öfters ist es geschickt, nicht ganz so präzise selektieren zu können. Hier haben wir die Möglichkeit über eine Erweiterung vor dem Gleichheitszeichen:

Über diese Möglichkeiten sollen sehr viele Anwendungsbereiche abdeckbar sein.