Webdesign - Webseiten planen, gestalten - Free-Hack Library

Tab. 4.4.2c: Beispiele für einen Klassen- und
einen ID-Selektor
68
CSS
Klassen- und ID-Selektoren
Das Universalattribut class kann für fast alle HTML-Elemente
vergeben werden und wird mit CSS über den Klassenselektor
angesprochen, indem man den Klassennamen mit einem führenden
Punkt ohne Leerzeichen direkt hinter den einfachen Selektor
setzt. Die Regel
.rot {/* alternativ: *.rot /*
color: ff0000;
}
spricht alle Elemente an, deren Attribut class den Wert „rot“
enthält, und färbt den entsprechenden Text rot:
Überschrift
Dieses Wort ist rot.
Mehrere Klassen können durch ein Leerzeichen getrennt in einem
Klassenattribut angegeben werden.
Das Universalattribut id funktioniert fast analog wie der Klassenselektor,
hat in HTML-Dokumenten jedoch insofern eine besondere
Bedeutung, weil sein Wert pro Dokument nur ein Mal auftreten darf
und Elemente mit diesem Attribut als Zielanker eines Links dienen
können. Aus der zweiten Eigenschaft ergibt sich auch die Notation
des ID-Selektors in CSS: Es wird eine Raute (#) vorangestellt:
#kopf {
margin: 0;
padding: 0;
}
Attributselektoren
Seit CSS 2 können Webautoren Elemente mit Hilfe von vier Attributselektoren
auch über ihre Attribute ansprechen:
E[att] {} /* Element E mit Attribut att */
E[att="wert"] {} /* Element E mit Attribut att und Wert
"wert" */
CSS HTML Ergebnis
.gruen {
color:#00ff00;
}
#kopf {
margin: 1em;
}
Dieser Text enthält
grüne Worte.
Kopf
Normaler Text