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

Social Bookmarks

Über den Autor

Mein Name ist Axel Scheuering. Während meines Studiums (Wirtschaftsinformatik) habe ich meine Brötchen als Webentwickler verdient. Mmhh lecker Brötchen. Seit ich mit dem Studium fertig bin, arbeite ich hauptberuflich im Bereich Suchmaschinenoptimierung.

2009 habe ich bei der Google Online Marketing Challenge teilgenommen und mich zusammen mit meinem Team gegen über 2.000 Teams aus der gazen Welt durchgesetzt. Wir haben unter den "Final 15" weltweit den 2. Platz erreicht und dafür einen Marketingpreis erhalten :)

Diese Site betreibe ich nicht mehr aktiv weiter. Mein neues Blog findest du unter Methode-Web.de

Inhalte dort sind Webentwicklung, Suchmaschinenoptimierung, das Web allgemein und Literaturtipps.