CSS-Selektoren

Klippstein IT Service

Aus 4webmaster.de

Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

Mit CSS können Sie festlegen, wie bestimmte Elemente (in HTML- oder XHTML) dargestellt werden sollen. Für so eine Festlegung müssen Sie zwei Fragen beantworten:

  1. Welche Elemente sollen speziell dargestellt werden?
  2. Wie sollen diese Elemente dargestellt werden?

Hier geht es um die erste Frage: Wie sage ich dem Browser, welche Elemente ich überhaupt formatieren will? Im Sprachgebrauch von CSS spricht man von Selektoren.


Am folgenden Beispiel sehen Sie den typischen Aufbau einer CSS-Definition:

h1 { color: blue; font-weight: bold; }

h1 ist der Selektor. Im obigen Beispiel bedeutet er: "Die folgende Definition gilt für alle h1-Elemente". Der Selektor beantwortet also die erste Frage: Welche Elemente sollen speziell dargestellt werden?

In geschweiften Klammern hinter dem Selektor steht die Antwort auf die zweite Frage: Wie sollen diese Elemente dargestellt werden? Im obigen Beispiel soll blau und fett formatiert werden.

Es gibt verschiedene Möglichkeiten, die zu formatierenden Elemente auszuwählen. Betrachten wir alle Möglichkeiten anhand von Beispielen.

Ich gehe in den folgenden Beispielen davon aus, dass Sie HTML-Elemente formatieren wollen. Dann muss ich nicht so abstrakt formulieren, das Thema ist auch so schon abstrakt genug. Sie können diese Beispiele aber auf andere Sprachen übertragen. Mit CSS lassen sich auch XHTML-Elemente formatieren und die Elemente vieler anderer Sprachen.



Selektierbare Eigenschaften

Die Elemente, die Sie formatieren wollen, haben bestimmte Eigenschaften. Anhand der folgenden Eigenschaften können Sie selektieren:

  • Typ: Selektion nach dem HTML-Elementnamen.
    Beispiel: Ein HTML-Element <h1> ist vom Typ h1.
  • Klasse: Selektion nach dem class-Attribut des Elementes.
    Beispiel: Ein HTML-Element <span class="rot"> hat die Klasse rot.
  • ID: Selektion nach dem id-Attribut des Elementes.
    Beispiel: Ein HTML-Element <div id="footer"> hat die id footer.
  • Attribut: Selektion nach beliebigen Attributen, nicht nur class oder id.

Typ-Selektoren

Der grundlegenste Selektor von CSS ist der Typ-Selektor. Damit lassen sich z.B. alle Überschriften gleich formatieren oder dokumentenweit gültige Regeln für Tabellenzellen aufstellen. Die allgemeine Regel lautet:

Ein HTML-Elementname als Selektor gilt für alle HTML-Elemente des bezeichneten Typs.

Betrachten wir dazu ein einfaches Beispiel:

h1 { color: blue; font-weight: bold; }

Die Formatdefinition in den geschweiften Klammern gilt für alle Elemente vom Typ h1. Schreiben Sie also auf ihrer HTML-Seite

<h1>Dies ist eine Überschrift</h1> 

dann wird diese Überschrift blau und fett dargestellt werden.

Klassen-Selektoren

Die Klasse eines HTML-Elementes ist eine Eigenschaft, die der Designer frei wählen kann. So lassen sich ähnliche Elemente zusammenfassen. Mit den Klassen-Selektoren von CSS lassen sich alle Elemente einer Klasse gleich formatieren.

Die allgemeine Regel lautet:

Mit einem Punkt gefolgt von einem Klassennamen schränken Sie die Auswahl der Elemente auf eine bestimmte Klasse ein.

Beispiel:

.rot { color: red; }

Die Formatdefinition gilt für alle Elemente, die der Klasse "rot" angehören. Dabei ist es unerheblich, um was für ein HTML-Element es sich genau handelt. Entscheidend ist nur die Klassenzugehörigkeit. Beispiele:

<span class="rot">     Dies wird rot dargestellt.</span> 
<div class="rot">      Dies auch!                </div> 
<h1 class="rot">       Dies auch!                </h1> 
<p class="rot footer"> Dies ist auch rot.        </p> 

Im letzten Beispiel sehen Sie übrigens ein HTML-Element, das zwei Klassen gleichzeitig angehört. Dieses p-Element wird sowohl gemäß der Klasse rot formatiert, als auch gemäß der Klasse footer.

Genau genommen ist der Syntax in obiger CSS-Definition nur eine Abkürzung. Eigentlich müssten Sie ein * vor den Punkt schreiben:

*.rot { color: red; }

Der * steht für jedes beliebige Element. Er heißt Universal-Selektor. In der Praxis wird er meist weggelassen, aber wenn Sie wissen, dass * für jedes beliebige Element steht, erleichtert das das Verständnis der folgenden Selektoren.


ID-Selektoren

Der Designer kann einem HTML-Element nicht nur eine Klasse zuordnen, sondern auch eine eindeutige ID. Mit Hilfe dieser ID können Sie ein ganz bestimmtes Element speziell formatieren. Die allgemeine Regel lautet:

Mit einer Raute gefolgt von einem Identifikator selektieren Sie das Element mit der angegebenen id.

Beispiel:

#navigation { float: right; }

Obige Formatdefinition gilt nur für ein einziges Element. Und zwar für das Element mit der id "navigation". Beispiel:

<div id="navigation"> Die Navigation ist auf dieser Site rechts. </div> 

Verwendet wird die Selektion per ID beispielsweise um das Grundlayout einer Site festzulegen. Dann gibt es z.B. ein div-Element mit id="main"", eines mit id="footer"", eines mit id="navigation"" usw. Jedes Element gibt es aber nur einmal. Statt mit id können Sie oft auch mit class arbeiten, für CSS macht es eigentlich keinen Unterschied.

Wenn man es genau nimmt, ist der Syntax in obiger CSS-Definition wieder nur eine Abkürzung. Eigentlich müssten Sie den Universal-Selektor * vor den Punkt schreiben, er selektiert jedes beliebige Element:

*#navigation { float: right; }

In der Praxis werden Sie diese Schreibweise nur sehr selten sehen, sie ist sehr ungebräuchlich.

Attribut-Selektoren

Mit Attribut-Selektoren können Sie Elemente abhängig vom Wert ihrer Attribute auswählen. Am einfachsten lassen sich die Attribut-Selektoren anhand von Beispielen verstehen:

a[href ^="mailto:"] { background-image: url(mail_icon.png); }
a[href $=".wav"]    { background-image: url(audio_icon.png); }

Die erste Formatdefinition fügt jedem mailto-Link ein Icon hinzu. Auch das zweite Beispiel erzeugt ein automatisches Icon. Hier wird jeder Link auf eine WAV-Datei mit einem Icon versehen. Sehr praktisch!

Um die Attribut-Selektoren zu verstehen, betrachten wir zunächst noch einmal die Begriffe: Was ist ein Element, was ist ein Attribut, was ist ein Wert? Dazu ein einfaches Beispiel in HTML.
Es enthält zwei HTML-Elemente: Das div-Element und das a-Element.

<div class="navi">
     <a href="http://w3.org" 
        title="zum WWW-Consortium"> 
        Link zum WWW-Consortium 
     </a>
</div>

  • Das div-Element besitzt ein Attribut, und zwar das class-Attribut.
    Außerdem hat es einen Inhalt, nämlich das a-Element.
    • Das class-Attribut hat den Wert "navi".
    • Einziger Inhalt des div-Elementes ist das a-Element.
      Es besitzt zwei Attribute, und zwar das href-Attribut und das title-Attribut.
      Außerdem hat es einen Inhalt, nämlich den Linktext.
      • Das href-Attribut hat den Wert "http://w3.org".
      • Das title-Attribut hat den Wert "zum WWW-Consortium".
      • Der Inhalt des a-Elementes ist der elementlose Text "Link zum WWW-Consortium".

Mit Attribut-Selektoren können Sie Elemente abhängig vom Wert ihrer Attribute auswählen. Folgende Möglichkeiten haben Sie:

Selektor Bedeutung Definition ab Version
[att] existiert Erfasst alle Elemente, die ein att-Attribut besitzen. Welchen Wert das Attribut hat, ist egal. CSS2
[att = "val"] genau gleich Erfasst alle Elemente, dessen att-Attribut den Wert "val" hat. CSS2
[att ^= "val"] beginnt mit Erfasst alle Elemente, dessen att-Attributswert mit "val" beginnt. CSS3
[att $= "val"] endet mit Erfasst alle Elemente, dessen att-Attributswert mit "val" endet. CSS3
[att *= "val"] enthält Erfasst alle Elemente, dessen att-Attributswert an irgendeiner Stelle die Zeichenfolge "val" enthält. CSS3

Für sehr spezielle Anwendungen gibt es außerdem die Operatoren [att ~= "val"] und [att |= "val"]. Sie passen nur unter ganz bestimmten Umständen. Lesen Sie dazu bitte direkt in der CSS-Spezifikation nach: [[1]].



Kombinationen

Und-Verknüpfung

Beide Möglichkeiten der Selektion (nach Typ und nach Klasse) lassen sich kombinieren:

h1.rot { background-color: grey; }

Die obige Formatdefinition gilt nicht mehr für alle h1-Elemente, sondern nur noch für h1-Elemente, die der Klasse "rot" angehören. Schreiben Sie also auf ihrer HTML-Seite

<h1 class="rot">Dies ist die rote Überschrift</h1> 

dann wird diese Überschrift zusätzlich mit grauem Hintergrund dargestellt. Andere h1-Überschriften dagegen werden von der Definition dagegen nicht erfasst.

Mit HTML-Elementname Punkt Klassenname selektieren Sie Elemente eines bestimmten Typs und einer bestimmten Klasse.

Ähnlich können Sie auch Elemente selektieren, die einen bestimmten Typ haben und eine bestimmte ID:

Mit HTML-Elementname Raute Klassenname selektieren Sie Elemente eines bestimmten Typs und einer bestimmten ID.

Das macht nur Sinn, wenn IDs mehrfach vergeben wurden.

Oder-Verknüpfung

Auch eine Oder-Verknüpfung ist möglich.

Mit einem Komma trennen Sie alternative Selektoren voneinander, die gleich formatiert werden sollen.

Beispiel:

.red, .rot, #logo, .logo { color: red; }

Die obige Formatdefinition gilt für alle Elemente, die entweder der Klasse red angehören, oder die der Klasse rot angehören, oder die sich mit logo identifizieren, oder die der Klasse logo angehören. Sie ist also eine Kurzform für

.red  { color: red; }
.rot  { color: red; }
#logo { color: red; }
.logo { color: red; }

Hierarchische Verschachtelung

Dieser Selektor lässt sich wieder am einfachsten anhand eines Beispieles verstehen:

.navigation h1 {	
  font-size: 95%;
  font-weight: normal;
  white-space: nowrap;
}

Mit dieser Formatdefinition bewirken Sie, dass h1-Elemente innerhalb der Navigation völlig anders dargestellt werden als sonst. Anwendungsbeispiel:

<h1>Eine normale Überschrift</h1>
<div class="navigation">
    <h1>Innerhalb der Navigation wird h1 ganz anders formatiert!</h1>
</div>
<h1>Noch eine normale Überschrift</h1>

Die allgemeine Regel lautet:

Ein äußeres Element, welches das selektierte Element umgeben muss, notieren Sie vorweg und trennen es mit einem Space.

Die Selektion verschachtelter Elemente ist wichtig und wird gerne verwendet. Betrachten wir daher noch ein anderes Beispiel:

strong b, b strong { text-transform: uppercase; }

Obige Formatdefinition bezieht sich auf b-Elemente, die sich in einem strong-Element befinden, oder umgekehrt. Eigentlich bewirken b und strong das gleiche, sie machen fette Schrift. Mit obiger Formatdefinition erwirken Sie, dass doppelter Fettdruck als Großbuchstaben dargestellt wird:

<strong>
   Dieser Text ist fett. 
   <b>Und dieser ist fett und Großbuchstaben!</b>
   Hier ist es wieder fett und ohne Großbuchstaben.  
</strong>

Es gibt noch eine Verfeinerung, die wir anhand des folgenden Beispiels betrachten können:

#navigation a       { color: black; }
#navigation a.aktiv { color: red; }

Mit diese Formatdefinition bewirken Sie, dass Navigations-Links schwarz sind. Der aktive Navigationslink aber ist rot. Anwendungsbeispiel:

<a href="irgendwohin1"> Außerhalb der Navigation: normale Linkfarbe </a>

<div id="navigation"> 
   <div id="navigation-body">
      <a href="ziel_a"> schwarzer Link </a>
      <a href="ziel_b" class="aktiv" > roter Link </a>
      <a href="ziel_c"> schwarzer Link </a>
   </div>
</div>

<a href="irgendwohin2"> Außerhalb der Navigation: normale Linkfarbe </a>

Haben Sie schon gesehen, dass die Navigations-Links gar nicht unmittelbar im #navigation-Element sind? Ein weiteres div trennt die Links von ihrem umgebenen Container. Die CSS-Selektion funktioniert aber trotzdem. Es ist unerheblich, wieviele Ebenen dazwischen liegen. Wichtig ist nur, dass die zu formatierenden Links irgendwo in einem #navigation-Element enthalten sind.

Es gibt auch einen Selektor, der nur dann funktioniert, wenn der äußere Selektor ein direktes Eltern-Element ist. D.h. es darf dann, anders als im obigen Beispiel, keine Ebene dazwischenliegen. Die Regel lautet:

Ein äußeres Element, welches das selektierte Element direkt umgeben muss, notieren Sie vorweg und trennen es mit einem Größer-Zeichen (>).

In Kombination mit dem Universalselektor * haben Sie die Möglichkeit, bei der Selektion die Anzahl der dazwischenstehenden Ebenen als Kriterium mit einfließen zu lassen. Siehe [[2]].

Abfolge

Sie können auch HTML-Elemente formatieren, die sie daran erkennen, welches HTML-Element in der Reihenfolge vor ihnen steht. Anders als bei der hierarchischen Verschachtelung liegt dieses Vorgängerelement aber auf der gleichen hierarchischen Ebene wie das nachfolgende Element. Die allgemeine Regel lautet:

Ein Vorgänger-Element, welches direkt vor dem selektierten Element existieren muss, notieren Sie vorweg und trennen es mit einem Plus-Zeichen.

Beispiel:

div.logo + p { display:none; }

Obiges Beispiel blendet den Absatz aus, der auf ein div der Klasse logo folgt. Mit dieser Technik können Sie z.B. das Layout von Standardsoftware ändern, auch ohne den möglicherweise dynamisch generierten HTML-Quelltext anzufassen. Beispiel:

<div class="logo"> Dies ist das Logo </div>
<p> Dieser Text wird nicht angezeigt. Es sei denn Sie benutzen noch den IE6.</p>


Ein weiteres Beispiel:

hr + h2 {  padding-top: 0em;}

Mit dieser Definition erreichen Sie, dass h2-Überschriften auf ihr Padding verzichten, wenn über ihnen eine Linie ist. Auf ganz ähnliche Weise wurden übrigens die Linien über den Überschriften auf dieser Seite erzeugt.

Mit dem Plus-Zeichen legen Sie fest, dass das selektierte Element einen bestimmten direkten Vorgänger hat. Zwischen den beiden Elementen dürfen keine weiteren Elemente liegen, die müssen direkt aufeinander folgen. Zwischen ihnen ist nur einfacher Text erlaubt, der kein eigenes Element bildet.

Sie können aber dazwischenliegende Elemente auch erlauben. Dann verwenden Sie statt des Plus-Zeichens einfach die Tilde. Die allgemeine Regel lautet:

Ein Vorgänger-Element, welches vor dem selektierten Element existieren muss, notieren Sie vorweg und trennen es mit einer Tilde (~).

Was geht nicht?

  • enthält XY: Sie können zwar Elemente selektieren, die von einem bestimmten äußeren Element umgeben sind (siehe Hierarchische Verschachtelung), aber Sie können keine Elemente selektieren, die ein bestimmtes Element enthalten.
  • hat Inhalt: Sie können zwar Elemente selektieren, die Attribute mit bestimmten Werten haben (siehe #Attribut-Selektoren, aber Sie können keine Elemente selektieren, die einen bestimmten Inhalt haben.
  • hat Nachfolger XY: Sie können zwar Elemente selektieren, die einen bestimmten Vorgänger haben (siehe Abfolge), aber Sie können keine Elemente selektieren, die einen bestimmten Nachfolger haben.