Du bist hier: Startseite > WebWissen > CSS > CSS Attribut Selektoren
Folge mir bei Twitter...

und bleibe auf dem Laufenden, was die Themen SEO und Webentwicklung angeht!

Donnerstag, 25. Juni 2009 um 20:12 Uhr

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

Tags

attribut selector  attribut selectors  CSS Attribut Selektoren  

Tweets

An error occurred

Oops, an error seems to have occurred. We're sorry for any inconvenience this might have caused. If the error persists, feel free to tell us about it.

Social Bookmarks

Über den Autor

Ich bin Axel Scheuering und bin SEO (ich weiß, dass diese Seite SEO-Onpage-mäßig nicht perfekt ist ;) ). Bevor ich in das SEO Thema Hauptberuflich eingestiegen bin (war schon länger mein Hobby) war ich Web-Entwickler. Das ist jetzt mein Hobby. Hier sammle ich alles, was die Themen Webentwicklung und SEO angeht. 

Diese Webseite ist also eine Sammlung von Webwissen über alle Themen, die mich bei meiner Arbeit beschäftigen und gleichzeitig mein Beitrag zu Open Source.

Alle Veröffentlichungen auf dieser Webseite stehen unter der Creative Commons Lizenz.