StyleAssistant |
| Startseite |
 |
| Screenshot |
|
| Kurzanleitung |
|
| Download |
|
| Kurse & Infos |
|
| >Tipps & Tricks< |
|
| Unterstützer |
|
| TMXtensions |
|
| ?Freeware! |
|
| About TM |
|
Stand: 07.12.2002 |
Tipps & Tricks – Tipp 65
|
 |
 |
 |
|
65.
Attributselektoren (18.09.2001)
Zu den modernen CSS-Techniken gehört die Möglichkeit, (HTML-)Elementen CSS-Features in Abhängigkeit von den ihnen zugeordneten Attributen zuzuweisen. Dazu gibt man nicht nur das Element selbst
oder einen Klassenbezeichner an, sondern fügt in eckigen Klammern diese Attribute hinzu: ELEMENT[attribut] oder ELEMENT[attribut="wert"].
Die CSS-Definitionen sollen genau dann gelten, wenn das ELEMENT mit dem jeweiligen Attribut existiert bzw. nur dann, wenn zusätzlich auch ein konkreter Attributwert vorhanden ist.
Die Schreibweise ELEMENT[attribut~="wert"] zeigt an, dass diese Regel verwendet werden soll, wenn das Element ein
Attribut besitzt, welches ein Auflistung der Art "wert wert1 wert2" mit Leerzeichen als Trenner darstellt und "wert" innerhalb dieser Auflistung vorkommt. Dagegen wird mit ELEMENT[attribut|="wert"]
die Bedingung gestellt, dass das bezeichnete Attribut sowohl mit "wert", als auch mit "wert-...", d. h. "wert" gefolgt von einem Bindestrich und weiteren erlaubten Zeichen beginnen kann.
Die Anführungszeichen innerhalb von [...] sind meistens nicht erforderlich, außer dann, wenn Attributwerte mit Sonderzeichen vorkommen, z. B. bei URL-Angaben wie A[href="http://www.styleassistant.de"].
Im Beispiel 65 wird das anhand von INPUT-Formularelementen mit den Attributen text, radio und checkbox demonstriert.
INPUT[type="text"]
{
Color: #0000CC;
Background-Color: #FFFFCC;
Font-Family: "Courier New", Courier, Monospace;
Border: 1px dashed #FF0000;
}
INPUT[type="radio"]
{
Color: #0000FF;
Background-Color: #FFFF00;
Border: 1px solid #0000FF;
}
INPUT[type="checkbox"]
{
Color: #FF0000;
Background-Color: #FFFFFF;
Border: 1px solid #00CC00;
}
Somit entfällt das separate Zuordnen von CSS-Eigenschaften innerhalb der einzelnen INPUT-Tags mittels CLASS="xyz". Leider kann man auch diese interessanten Möglichkeiten nur
eingeschränkt in den aktuellen Browsern verwenden. Nur Netscape 6.x bzw. Mozilla warten mit einer entsprechenden Umsetzung auf. IE bis Version 6
und Browser-Darling Opera 5.x haben offenbar keine Lust auf des Autors Formatierungen ...
|
|
 |
|
 |
