CSS/Selektoren/Klassenselektor

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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.

Beispiel ansehen …
<!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.

Es ist mithilfe des Klassenselektors nicht möglich, Elemente zu selektieren, die ausschließlich einer Klasse angehören. Dazu muss man auf Attributselektoren zurückgreifen.

  • .beispiel selektiert ein Element auch dann, wenn es neben der Klasse „beispiel“ noch weiteren Klassen angehört.
  • .beispiel ist aus CSS-Sicht identisch zu [class~="beispiel"]
  • [class="beispiel"] leistet das Verlangte.
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Klassenselektor</title> <style> .beispiel {font-style: italic;} .beispiel.hinweis {color: green;} [class="beispiel"] {border: 1px solid blue;} </style> </head> <body> <p class="beispiel">Dieser Absatz gehört zur Klasse <code>beispiel</code> und seine Schrift wird deshalb kursiv und mit blauem Rahmen 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, aber ohne Rahmen 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 erweiterten Beispiel von oben wird der Text des ersten Absatzes zusätzlich blau umrandet dargestellt, da nur der erste Absatz ausschließlich zur Klasse „beispiel“ gehört.