Attributsbedingte CSS-Formatierung Drucken E-Mail
Scripting-Tipps - CSS

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. Dieser Artikel erläutert Ihnen, wie Sie über Attribute die CSS-Formatierungen steuern können.


Die Erstellung einer attributsbedingten CSS-Formatierung ist mit zwei relativ einfachen Schritten schnell erledigt. Dieser Artikel zeigt Ihnen zunächst, wie man eine Attributsbedingte Formatierung aufbaut und erläutert anschließend das verwendete Beispiel. Am Ende finden Sie 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 attributsbedingten Formatierung beginnen können, muss zunächst natürlich ein HTML-Grundgerüst entstehen. Das folgende Beispiel bezieht sich dabei auf ein Formular.

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 wir nun über bestimmte Attribute die bereits erstellten HTML-Elemente formatieren können, müssen diese natürlich im Stylesheet entsprechend formatiert werden.

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 unser 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 können Sie 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


 

Weitere Artikel: