Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren.
Ein CSS-Selektor nennt die Bedingungen, die auf ein Element zutreffen müssen, damit der nachfolgende Regelsatz an CSS-Deklarationen auf das Element angewendet wird. Der Selektor ist somit der Teil vor den geschweiften Klammern.
Beispiel
Selektor { /* CSS-Deklarationen z.B: font-color: blue; */ }
Der Element- bzw. Typselektor besteht aus dem Namen des Elements, das angesprochen werden soll. Mit diesem Selektor werden alle Elemente eines Typs angesprochen.
h1 { color: red; } h1, h2 { background-color: #ccc; border-radius: .5em; }
Der erste Regelsatz besteht aus einem Selektor h1, der allen h1-Elementen die Textfarbe rot zuweist. Der zweite Regelsatz besteht aus einer Selektor-Liste mit zwei voneinander unabhängigen Selektoren h1 und h2, die alle Überschriften vom Typ h1 und h2 anspricht.
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 <strong>beispiel</strong> und seine Schrift wird deshalb kursiv dargestellt.</p> <p class="beispiel hinweis">Dieser Absatz gehört sowohl zur Klasse <strong>beispiel</strong> als auch zur Klasse <strong>hinweis</strong> und sein Text wird deshalb grün und kursiv dargestellt.</p> <p class="hinweis">Dieser Absatz gehört nur zur Klasse <strong>hinweis</strong>. 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.
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. </code>
Mit dem ID-Selektor kann ein Element angesprochen werden, dem eine ID mit dem id-Attribut zugeordnet wurde. Ein ID-Selektor wird gebildet, indem das Gatterzeichen „#“ vor den ID-Namen gestellt wird.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: ID-Selektor</title> <style> #beispiel { border: medium solid green; } </style> </head> <body> <div id="beispiel"> <h1>ID-Selektoren</h1> <p>Dieses Beispiel demonstriert die Wirkung des ID-Selektors.</p> </div> </body> </html>
In diesem Beispiel erhält das gruppierende div-Element die ID „beispiel“. Die CSS-Regel bewirkt, dass um dieses Element ein grüner Rahmen dargestellt wird.
ID-Selektoren können mit anderen Selektoren verbunden werden:
Eine ID darf in einem Dokument nur ein einziges Mal vorkommen, die Kombination des ID-Selektors mit anderen Selektoren ergibt nur dann Sinn, wenn Sie die entsprechende ID in mehreren Dokumenten und in unterschiedlichen Situationen einsetzen. Welches Attribut als ID erkannt wird, hängt bei XML-Dokumenten von der DTD ab. Da ein XML-Parser eine DTD nicht verarbeiten muss, kann bei dem Browser unbekannten XML-Formaten nicht garantiert werden, dass die CSS-Eigenschaften angewendet werden.
Das Sternzeichen „*“ (der Asterisk) ist der Universalselektor. Mit ihm werden alle Elemente in einem Dokument angesprochen.
<!doctype html> <html> <head> <title>CSS-Beispiel: Universalselektor</title> <style> * {border: 3px solid green;} </style> </head> <body> <p>Dieses Beispiel demonstriert die Wirkung des Universalselektors auf <abbr>HTML</abbr>-Dokumente.</p> </body> </html>
Zeigt ein Browser obiges Dokument an, so wird um die Elemente html, body, p und abbr ein grüner Rahmen gezeichnet. Das Element head und seine Kindelemente werden aufgrund ihrer speziellen Eigenschaften in HTML überhaupt nicht angezeigt.
Ein Element, das ein bestimmtes Attribut besitzt, kann durch den einfachen Attributselektor angesprochen werden. Ein Attributselektor wird gebildet, indem eckige Klammern („[“ und „]“) um den Namen des Attributs gesetzt werden.
Ob die Groß- und Kleinschreibung des Attributnamens beachtet wird, hängt davon ab, ob Sie CSS für HTML oder für XML verwenden. Bei HTML wird sie nicht beachtet, bei XML (z. B. in SVG-Dokumenten) hingegen schon.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Attributselektor</title> <style> [title] {border: 3px solid green;} </style> </head> <body> <h1>Wirkung des einfachen Attributselektors</h1> <ul title="Linkliste"> <li><a href="http://www.example.org/">Beispielverweis</a></li> <li><a href="http://www.example.net/">Beispielverweis</a></li> <li><a title="Beispiel">Beispielverweis</a></li> </ul> </body> </html>
In diesem Beispiel erhalten nur das letzte Element der Liste und die Liste selbst einen grünen Rahmen, da beide über ein title-Attribut verfügen. Der Attributwert spielt für den einfachen Attributselektor keine Rolle.
Attributselektoren können mit anderen Selektoren verbunden werden:
Eine Selektor-Liste ist eine komma-separierte Liste von beliebigen Selektoren. Die Selektorliste trifft auf ein Element zu, wenn mindestens einer der darin enthaltenen Selektoren auf das Element zutrifft.
h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } h1, h2, h3 { font-family: sans-serif }
Beide Beispiele setzen für die Überschriften 1., 2. und 3. Ordnung die Eigenschaft font-family auf den Wert sans-serif. Bei dem zweiten Beispiel handelt es sich um eine Selektor-Liste.
Kombinatoren sind Zeichen, die zwei Selektoren miteinander verketten. Durch diese Verkettung bildet der erste Teilselektor eine Bedingung und der zweite Teilselektor das Ziel, das angesprochen werden soll, wenn die Bedingung erfüllt wurde. Der Kombinator gibt dabei an, in welchem Verhältnis die Teilselektoren vor und nach ihm zueinander stehen müssen.
Zwischen zwei Selektoren kann nur ein Kombinator stehen, jedoch kann an diese Kette ein weiterer Kombinator zusammen mit einem weiteren Teilselektor angehängt werden.
Die Bedeutung von kombinierten Selektoren ähnelt der von Pseudoklassen, ist jedoch allgemeiner.
Werden zwei Selektoren durch den Kombinator > (schließende spitze Klammer, Größer-Als-Zeichen) verbunden, z. B. E > F, so wird das Element F nur dann angesprochen, wenn es ein Kindelement eines E-Elements ist.
p > em { color: green; }
In diesem Beispiel werden alle em-Kindelemente von p in grüner Schriftfarbe dargestellt. Dies betrifft nur das Wort „Dieses“, da es sich um das einzige em-Element handelt, das direkt innerhalb des Absatzelements vorkommt.
<h1> Der <em>Kind</em> selektor </h1> <p> <em>Dieses</em> Beispiel demonstriert die Wirkung des <del> <em>Nachbar</em> </del> Kindselektors. </p>
Das em-Element in der Überschrift ist überhaupt kein Kind des p-Elements. Und das em-Element innerhalb des del-Elements ist kein direktes Kind des p-Elements, sondern ein Kind des del-Elements; also sozusagen nur ein Kindeskind des p-Elements. Deshalb wird es in der normalen Schriftfarbe dargestellt.
Werden zwei Selektoren durch den Kombinator (Leerzeichen) verbunden, z. B. E F, so wird das Element F nur dann angesprochen, wenn es ein Nachfahrenelement eines E-Elements ist. Dabei muss es kein direktes Kindelement sein, sondern kann auch weiter unten im Elementbaum notiert sein.
Das Leerzeichen (bzw. ein anderes Whitespace-Zeichen) zwischen zwei Selektoren dient nur dann als Kombinator, wenn kein anderer Kombinator vorhanden ist.
p em { color: green; padding: border: 1px solid; background-color: #fffbf0; font-style: italic; }
Stilfestlegung für em-Elemente, die Nachfahrenelemente von p sind.
<h2>Der <em>Nachfahren</em>selektor</h2> <p> <em>Dieses</em> Beispiel demonstriert die Wirkung des <del>Nachbar</del><ins><em>Nachfahren</em></ins>selektors. </p>
In diesem Beispiel werden die beiden em-Elemente innerhalb des Absatzes mit grüner Schriftfarbe dargestellt, da es sich bei beiden um Nachfahrenelemente des p-Elements handelt. Das em-Element innerhalb der Überschrift ist kein Nachfahre des p-Elements, es ist deshalb nicht betroffen.
Werden zwei Selektoren durch den Kombinator + (Pluszzeichen) verbunden, z. B. E + F, so wird das Element F nur dann angesprochen, wenn es im Elementbaum direkt auf ein E-Element folgt, also der direkte Nachbar ist.
h1 + p { font-weight: bold } p + p { font-style: italic }
<h1>Nachbarkombinator</h1> <p>Erster Absatz.</p> <p>Zweiter Absatz.</p> <p>Dritter Absatz.</p> <div>neutrales Element</div> <p>Vierter Absatz</p>
In diesem Beispiel wird der erste Absatz mit fett formatierter Schrift dargestellt, denn es ist das einzige unmittelbare Nachbar-p-Element von h1. Für den zweiten und dritten Absatz gilt: Sie sind Nachbar-p-Elemente je eines p-Elements. Sie werden also kursiv dargestellt.
Der vierte Absatz ist ein Nachbar eines neutralen div-Elements und wird nicht gestylt.
Werden zwei Selektoren durch den Kombinator ~ (Tilde) verbunden, z. B. E ~ F, so werden alle F-Elemente angesprochen, die im Elementbaum in derselben Ebene auf ein E-Element folgen – unabhängig davon, ob sich zwischen den Elementen weitere, im Selektor nicht genannte, Elemente befinden.
h1 ~ p {font-weight: bold;}
<p>Erster Absatz.</p> <h1>Der Geschwisterselektor</h1> <p>Zweiter Absatz.</p> <hr> <p>Dritter Absatz.</p>
In diesem Beispiel werden sowohl der zweite als auch der dritte Absatz mit fett formatierter Schrift dargestellt, da beide Elemente auf das h1-Element folgen. Die Trennlinie zwischen den beiden Absätzen verhindert dies nicht. Einzig der erste Absatz wird mit normaler Schrift dargestellt, da er vor dem bedingenden h1-Element steht.