WOW: CSS Attribut Selektoren!

Hier wird gezeigt, wie man mit Hilfen von sog. Attribut Selektoren per CSS einzelne Elemente aufgrund ihrer Attribute verändern kann - Ohne Javascript!

CSS Attribut Selektoren sind eine elegante Möglichkeit, um Elemente aufgrund ihrere Attribute zu verändern. Man braucht also nicht immer Javascript, sondern kann Elemente auch individuell per CSS formatieren.

So geht's

Alle Überschriften h1 blau machen:

 h1[title] { color: blue; }

Externe und interne Links unterschiedlich formatieren:

a[href^="http://"] { color:red; }

Hier wird geprüft, ob der Link den String "//" enthält. Ist es so können wir davon ausgehen, dass der Verweis auf eine externe Seite geht (alle internen Links könnten relativ gesetzt sein und externe Links absolut, also mit http://www.....)

Alle Absätze mit der Klasse"absatz" grau machen:

 
p[class=absatz] { color:grey; } 

Natürlich könnte man das auch so schreiben (herkömmliche Schreibweise):

 
p.absatz { color:grey; } 

Das Beispiel soll aber zeigen, dass man auch aufgrund des Inhalts von Attributen CSS anwenden kann.

Den Absatz mit einem eigenen Attribut grün hinterlegen:

 
p[mein_attribut=etwas] { background:green; } 

Hier wird geprüft, ob es einen Absatz gibt, der das Attribut "mein_attribut" hat. Ist es so, wird geprüft, ob das Attribut den Wert "etwas" hat. Ist dies auch so, wird der Hintergrund grün.

Man kann also auch eigene Attribute in seinem HTML-Code definieren und diese dann per CSS genau ansprechen.

CSS Attribut Selektoren sind also eine komfortable Möglichkeit, ohne Javascript genau einzelne Elemente zu formatieren.

Kommentare

Name *
Code   
ChronoComments by Joomla Professional Solutions

Kommentar abgeben