Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe