Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

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:

Attributselektor Auswirkung
[Attributname="WERT"] Attributwert muss exakt übereinstimmen
[Attributname~="WERT"] Attributwert muss exakt übereinstimmen – es können mehrere Attributwerte gesetzt sein
[Attributname^="WERT"] Attributwert muss mit dieser Zeichenkette starten
[Attributname$="WERT"] Attributwert muss mit dieser Zeichenkette enden
[Attributname*="WERT"] Attributwert muss innerhalb Zeichenkette vorkommen – egal wo
[Attributname|="WERT"] Attributwert, der mit Minuszeichen angegeben ist – hier der erste Teil. Beispiel ist lang=de-AT

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

weitere eigene Projekte: