Attributsbedingte CSS-Formatierung

Zuletzt aktualisiert: Dienstag, 03. Januar 2017 Geschrieben von Jan Pionzewski

CSS-Formatierungen kann man ganz leicht von gewissen Attributen abhängig machen. So ist es beispielsweise möglich, alle zentrierten Texte anders zu formatieren, als nicht zentrierte Texte. Die Möglichkeiten dabei sind fast unbegrenzt.

In diesem Artikel zeige ich dir, wie du über Attribute die CSS-Formatierungen steuern kannst.


Die Erstellung einer attributsbedingten CSS-Formatierung ist mit zwei relativ einfachen Schritten schnell erledigt. Zunächst zeige ich dir, wie man eine attributsbedingte Formatierung aufbaut und erläutere anschließend das verwendete Beispiel. Am Ende finden du eine kleine Tabelle mit möglichen CSS-Selektoren für eine attributsbedingte Formatierung.

 

Schritt 1: HTML-Elemente in die Webseite einfügen

Damit wir mir der Formatierung beginnen können, muss zunächst natürlich ein HTML-Grundgerüst entstehen. Das folgende Beispiel bezieht sich dabei auf ein Formular.

 

Code-Beispiel:

<html>
<head>
<title>Attributsbedingte CSS-Formatierung</title>
</head>
<body>

<form>
Name:<br />
<input name="Name" type="text" value="Ihr Name"><br /><br />
Passwort:<br />
<input name="Passwort" type="password" value="passwort"><br /><br />

<input type="reset"> <input name="Daten Absenden" type="submit">
</form>

</body>
</html>

 

Schritt 2: Die Attribute mit CSS formatieren

Damit nun über bestimmte Attribute die bereits erstellten HTML-Elemente formatieren werden können, müssen diese natürlich im Stylesheet zunächst festgelegt werden.

 

Code-Beispiel:

input[type=text] {
 color: red;
}

input[name=Passwort] {
 background-color: lightgrey;
}

input[name~=Absenden] {
 font-weight: bold;
}

 

Erläuterung

Mit den im Beispiel vorgestellten Formatierungen würde das Formular nun ein wenig bunter aussehen. Der Text im Feld "Name" wird dabei rot angezeigt. Das Feld für das Passwort wird mit einem hellen Grau hinterlegt. Der Text auf dem Button "Daten absenden" hingegen ist fett geschrieben.

Nach diesem Schema kannst du auch beliebig andere HTML-Elemente attributsbedingt formatieren. Wie im Einleitungstext schon geschrieben, würde sich speziell ausgerichteter Text so anders formatieren lassen, als der "normale" Fließtext einer Seite.

 

Mögliche CSS-Selektoren für Attribute

Die folgende Tabelle enthält eine Liste aller möglichen Attributs-Selektoren in CSS.

 

Selektor Bedeutung
E[xam] Element E mit Attribut xam
E[xam="ple"] Element E mit Attribut xam und Wert ple
E[xam~="ple"] Element E mit Attribut xam, dessen durch Leerzeichen getrennte Liste von Werten ple enthält (p[class~="ple"] entspricht p.ple)
E[xam|="ple"] Element E mit Attribut xam, dessen durch Trennstriche (-) getrennte Liste von Werten mit ple beginnt
E[xam^="ple"] Element E mit Attribut xam, dessen Wert mit ple beginnt
E[xam$="ple"] Element E mit Attribut xam, dessen Wert mit ple endet
E[xam*="ple"] Element E mit Attribut xam, das die Zeichenkette ple enthält

 

 

 

Kommentar schreiben