Fotokurse und Schulungen
»Digitale Fotografie - Bildgestaltung«
Noch nie war es so einfach, Fotografieren zu lernen

Fotografie von ihrer besten Seite: Aktuelle Kameras, Bildbearbeitung und Fototipps auf foto.5lux.de

Mar 2009

CSS-Selektoren: Attribut-Selektoren

Anhand von Attributen, Werten von Attributen und selbst Teilstrings von Attributwerten lassen sich HTML-Tags selektieren. Attributselektoren werden in eckigen Klammern notiert.

Attribut-Selektoren	Bezeichnung / Bschreibung	Beispiel
E[attr] ( CSS2 )	Attribute selector (Attribut-Selektor) Alle E-Elemente, deren "attr"-Attribut gesetzt ist (gleich, mit welchem Wert).	`td[width] { background: red }`
E[attr="xyz"] ( CSS2 )	Attribute selector \| Attribut-Selektor Alle E-Elemente, deren "attr"-Attribut exakt den Wert "xyz" aufweist	`input[type="password"] { background: red; }`
E[attr~="xyz"] ( CSS2 )	Attribute selector \| Attribut-Selektor Alle E-Elemente, in deren "attr"-Attribut der Wert "xyz" enthalten ist	`img[alt~="Foto"] { float: right; }`
E[lang\|="xyz"] ( CSS2 )	Attribute selectors (Attribut-Selektor) Jedes E-Element, dessen "lang"-Attribut einen Bindestrich-geteilten Wert aufweist, der (von links) mit "xyz" beginnt.	`h1[lang\|="de-DE"] { color: yellow }`
E[attr^="xyz"] ( CSS3 )	Attribute selector \| Attribut-Selektor Alle E-Elemente, deren "attr"-Attribut mit "xyz" beginnt	`a[href~="http"] { border-bottom: 2px solid red }`
E[attr$="xyz"] ( CSS3 )	Attribute selector \| Attribut-Selektor Alle E-Elemente, deren "attr"-Attribut mit "xyz" endet	`a[href$=".php"] { font-family: courier; }`
E[attr*="xyz"] ( CSS3 )	Attribute selector \| Attribut-Selektor Alle E-Elemente, deren "attr"-Attribut die Zeichenkette "xyz" enthält	`a[href$=".php"] { font-family: courier; }`

Ab Version 7 unterstützt auch IE Attribut-Selektoren.

Einfacher Attribut-Selektor

td-Elemente mit einem width-Attribut sollen rot und alle td-Elemente mit einem valign-Attribut selektieren – ein Helfer auf der Suche nach alten überflüssigen Attributen.

td[width] { background: red; }   
td[valign] { background: green; } 

...
<table> 
   <tr> 
      <td width="9%"> </td> 
      <td valign="top"> </td> 
      <td> </td> 
      <td width="14%"> </td> 
      <td> </td> 
   </tr> 
...
</table>

Attribut-Selektor beginnt mit einem Wert

<style type="text/css">
<!--
   a[href^="http://"] { background: thistle; }
-->
</style>

Attribut-Selektor mit Teilstring eines Werts

<style type="text/css">
<!--
   img[alt~="Screenshot"] { border: 4px solid plum; }
   img[alt~="Grafik"] { border: 4px solid wheat; }
-->
</style>

Attribut-Selektor | Ende der Zeichenkette

Deutsche Überschrift

Französische Überschrift

Dänische Überschrift

<style type="text/css" title="text/css">
   h1[lang|="de-DE"] { color: plum }
</style>

Galileo Design – Spitzentitel für digitale Fotografie, Webdesign, Flash und Bildbearbeitung.

Stil mit {stil}

CSS-Selektoren: Attribut-Selektoren

Einfacher Attribut-Selektor

Attribut-Selektor beginnt mit einem Wert

Attribut-Selektor mit Teilstring eines Werts

Attribut-Selektor | Ende der Zeichenkette

Deutsche Überschrift

Französische Überschrift

Dänische Überschrift

Webseiten mit CSS gestalten

Element-, Klassen- und ID-Selektoren

background & color Farben

font Schriftgestaltung auf Webseiten

text-align • Ausrichten von Texten

width height

margin • äußerer Abstand

list-style Listen und Aufzählungen

position Positionierung

table Tabellen

user interface Mauszeiger / cursor

visibility Sichtbarkeit

generated content • Autom. generierte Zähler

Kurzreferenz CSS 2.1-Eigenschaften