Attribut-Selektoren
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Die nächste Gruppe von Selektoren, die ich hier einfach als »Attribut-Selektoren« zusammenfasse, gehören aus meiner Sicht zu den interessantesten CSS-Selektoren, da man mit ihnen fast so umgeht wie mit einer Programmiertechnik. Jeder Attribut-Selektor bestimmt auf seine spezifische Art, dass eine Stilregel nur auf Elemente angewandt wird, die entweder ein bestimmtes Attribut oder eine bestimmte Attribut-Wert-Kombination enthalten.
Es gibt vier Varianten von Attribut-Selektoren:
- [attribut] – Stilregel ist gültig für alle Elemente, die das angegebene HTML-Attribut enthalten.
- [attribut="wert"] – Stilregel ist gültig für alle Elemente mit exakt dieser Attribut-Wert-Kombination. Dem Attribut dürfen keine anderen Werte zugewiesen sein.
- [attribut~="wert"] – Stilregel ist gültig für alle Elemente mit exakt dieser Attribut-Wert-Kombination. Dem Attribut dürfen jedoch noch andere Werte zugewiesen sein.
- [attribut|="wert"] – Stilregel ist gültig für alle Elemente mit dieser Attribut-Wert-Kombination. Der Wert muss an erster Stelle stehen, und folgende Werte müssen durch einen Bindestrich miteinander verbunden sein.
Die folgende Stilregel enthält einen Attribut-Selektor der zweiten Variante. Mit ihr weisen wir allen einzeiligen Texteingabefeldern <input type="text" /> als Textfarbe weiß und als Hintergrundfarbe schwarz zu:
input[type="text"] {
color: white;
background-color: black;
}Mit der dritten der oben aufgeführten Variante von Attribut-Selektoren werden Attribute angesprochen, denen ein bestimmter Wert zugewiesen ist, der einzeln oder in einer Liste mit anderen Werten aufgeführt wird.
Dieser Attribut-Selektor ist zum Beispiel dann hilfreich, wenn mehrere Designer an einer Website arbeiten und dabei alt-Attribute in img-Elementen als vorübergehende Platzhalter für Bilder in den Code einfügen. Mit folgender Stilregel kann man die Plätze, an denen die Bilder später erscheinen sollen, auffällig markieren:
img[alt~="Platzhalter"] {
border: 8px solid red;
}Diese Stilregel stellt alle img-Elemente, deren alt-Attribute das Wort Platzhalter enthalten, mit einem auffälligen acht Pixel breiten Rand dar. Kaum zu übersehen!
Die vierte Variante der Attribut-Selektoren ist nur im Einsatz mit dem lang-Attribut hilfreich, bei Werten wie en oder de. Er kann auch benutzt werden, um regionale Dialekte festzulegen: en-us für amerikanisches Englisch, en-uk für britisches Englisch usw. Mit dem Selektor [attribute|="value"] können Sie den ersten Teil des lang-Attributs isolieren. Weitere Werte hinter dem Bindestrich werden ignoriert.
Sie haben es sicher so erwartet: Attribut-Selektoren werden nicht vom Internet Explorer 6 für Windows unterstützt und sind damit ebenso wie die anderen fortgeschrittenen Selektoren nur sehr eingeschränkt einsetzbar, obwohl sie sehr nützlich sind.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg