CSS/Selektoren/Klassenselektor

Aus SELFHTML-Wiki

Wechseln zu: Navigation, Suche
  • CSS 1.0
  • IE 3
  • Firefox 1.0
  • Opera 5.12
  • Konqueror 3.1
  • Safari 1.0

Ein Klassenselektor spricht Elemente an, die einer bestimmten Klasse zugehörend sind. Welche Elemente das sind, hängt von der verwendeten Auszeichnungssprache ab. In HTML-Dokumenten werden Klassen über das class-Attribut vergeben. Ein Klassenselektor wird gebildet, wenn vor dem Klassennamen ein Punkt notiert wird.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Klassenselektor</title> <style> .beispiel {font-style: italic;} .beispiel.hinweis {color: green;} </style> </head> <body> <p class="beispiel">Dieser Absatz gehört zur Klasse <code>beispiel</code> und seine Schrift wird deshalb kursiv dargestellt.</p> <p class="beispiel hinweis">Dieser Absatz gehört sowohl zur Klasse <code>beispiel</code> als auch zur Klasse <code>hinweis</code> und sein Text wird deshalb grün und kursiv dargestellt.</p> <p class="hinweis">Dieser Absatz gehört nur zur Klasse <code>hinweis</code>. Für diese Klasse sind keine Styleangaben notiert.</p> </body> </html>
In diesem Beispiel wird der Text des ersten und zweiten Absatzes kursiv dargestellt, da beide Absätze zur Klasse „beispiel“ gehören.
Klassenselektoren können mit anderen Selektoren verbunden werden, um genauer festzulegen, welche Elemente angesprochen werden sollen. Im Beispiel erhält der zweite Absatz eine grüne Schriftfarbe, da das Absatzelement sowohl der Klasse „beispiel“ als auch der Klasse „hinweis“ zugeordnet ist.

Sie können den Klassenselektor auch mit dem Typselektor verbinden, die Schreibweise lautet dann „elementname.klassenname“. Auf diese Weise sprechen Sie nur die Elemente an, bei denen Element- und Klassenname mit den Angaben des Selektors übereinstimmen. Die Kombination Universal- und Klassenselektor („*.klassenname“) ist ebenfalls möglich, aber identisch zur einfachen Schreibweise.

Beachten Sie:
  • .beispiel.hinweis selektiert Elemente, die der Klasse „beispiel“ und „hinweis“ angehören;
  • .beispiel, .hinweis selektiert Elemente, die der Klasse „beispiel“ oder „hinweis“ angehören (siehe von einander unabhängige Selektoren)
  • .beispiel .hinweis selektiert Elemente, die der Klasse „hinweis“ innerhalb der Klasse „beispiel“ angehören. (siehe Nachfahrenselektor).
Beachten Sie:
Klassennamen sollten nach ihrer Funktion (z.B. „Hinweis“) benannt werden und nicht nach den Formatierungen, die sie beinhalten. So stellen sie sicher, dass die Klasse auch nach einer Überarbeitung der Gestaltung noch nachvollziehbar den Bestandteilen eines Dokuments zugeordnet werden kann.

Viele informelle Eigenschaften eines Elements können durch elementspezifische Attribute abgedeckt werden. CSS erlaubt das Ansprechen von Elementen anhand ihrer Attribute. Klassen und Klassenselektoren sollten Sie daher nur dann einsetzen, wenn keine andere Zuordnungsmöglichkeit besteht.

Der Internet Explorer bis einschließlich Version 6 verarbeitet miteinander verbundene Klassenselektoren nicht korrekt. Es werden alle Elemente formatiert, die der zuletzt im Selektor genannten Klasse angehören. Im Beispiel würde also nicht nur der Zweite, sondern auch der Dritte Absatz eine grüne Schriftfarbe erhalten.
Hilfe
Weitere Bereiche
Flattr