Photoshop
Cinema 4d
HTML / CSS
JavaScript
PHP
Flash
Fotografie
Terragen
Webserver
Informatik
Sonstige
Selektoren (CSS Tutorial)
Tutorial erstellt von Jatzia in CSS2, letzte Änderung am 13.07.2008
In diesem Tutorial soll es um Selektoren gehen, welche Möglichkeiten sie bieten und wie sie am besten zu nutzen sind. Doch zunächst ein paar Worte zu den Selektoren selbst. Sie dienen als Schnittstelle zwischen der Stylesheet-Datei bzw. den zentralen Formaten im Head-Bereich und den zu formatierenden Seitenelementen. Ihre Anordnung ist immer dieselbe und wurde bereits in einem anderen Tutorial behandelt. Kurz zur Erinnerung:
Code:
Beginnen wir zunächst mit ein paar wichtigen Schreibregeln, die bei den Selektoren beachtet werden, da ansonsten nichts funktioniert. Zunächst betreffend der Groß- und Kleinschreibung. Wenn ich einen Selektor z.B. im Stylesheet mit
Code:
deklariere, dann muss ich auch beim Aufruf „test“ klein schreiben:
Code:
Zwar könnte auch „Test“ funktionieren, jedoch sind die Browser hier unterschiedlich, so dass manche eine Unterscheidung in Groß- und Kleinschreibung ablehnen. Grundsätzlich sollte man sich ohnehin angewöhnen eine einheitliche Schreibweise zu verwenden, was auch das restliche Scripten / Programmieren erleichtert.
Es gibt noch weitere Schreibregeln, die beim Umgang mit Selektoren beachtet werden müssen. So darf der Bezeichner eines Selektors aus Groß- oder Kleinbuchstaben des Alphabets (A-Z, a-z), Ziffern (0-9) und dem Bindestrich bestehen. Allerdings darf der Bezeichner nicht mit einer Zahl anfangen. Zwar kann man auch einen Tiefstrich „_“ verwenden, jedoch kann ich das nicht empfehlen, da er nicht von Anfang an zum CSS Standard gehörte und daher von älteren Browsern ggf. auch nicht akzeptiert wird.
Kommen wir nun zum ersten, richtigen Selektor, welcher auch gleich eine Besonderheit darstellt, der Universal-Selektor. Er gehört zu den Typ-Selektoren, die im nächsten Kapitel genauer erklärt werden. Sein Bezeichner besteht lediglich aus einem Sternchen „*“. Die Angaben in diesem Selektor gelten, wie der Name schon sagt, universal und demnach für jedes einzelne Element.
Stylesheet-Datei:
Code:
HTML-Seite:
Code:
Diese Definition würde zu folgender Ausgabe führen:
Code:
Widmen wir uns als nächstes dem Typ-Selektor. Er verbindet einen Elementtyp (z.B. h1) mit der im Stylesheet definierten Formatierung.
Stylesheet-Datei:
Code:
HTML-Datei:
Code:
Der ID-Selektor beginnt mit einem „#“, gefolgt von der ID-Bezeichnung. Über diesen Bezeichner kann man ihn im HTML-Code aufrufen. Der Selektor „#test“ kann somit in <h1 id=“test“> wie auch in <div id=“test“> verwendet werden und hat den gleichen Effekt. Allerdings kann man einen ID-Selektor auch genauer definieren und ihm einen Bezeichner eines HTML-Tags davor setzt, wie z.B. div#test. Wichtig bei einem ID-Selektor ist allerdings, dass man eine ID in einem Dokument nur ein einziges Mal vergeben darf.
Stylesheet-Datei:
Code:
HTML-Datei:
Code:
Im Folgenden wollen wir uns dem Klassen-Selektor zuwenden. Er zeichnet sich durch einen Punkt aus, gefolgt vom Klassennnamen, also dem Bezeichner. Er wird ähnlich verwendet wie der ID-Selektor. Man kann dem Klassen-Selektor ebenfalls den Bezeichner eines HTML-Tags voranstellen, um klar zu definieren, in welchem Tag diese Klasse verwendet werden kann und wo nicht. Im Gegensatz zum ID-Selektor kann man einem Element jedoch mehrere Klassen-Selektoren zuweisen, die einfach durch ein Leerzeichen angehängt werden.
Stylesheet-Datei:
Code:
HTML-Datei:
Code:
Betrachten wir als nächstes die verschiedenen Möglichkeiten einer Verschachtelung. Hier will ich euch vier Selektoren vorstellen: den Nachfahrenselektor, den Kindselektor, den Enkelselektor und den Nachbarselektor.
Der Nachfahrenselektor wird definiert, in dem ein Selektor auf einen anderen folgt. Dieser weist die Formatierung nur zu, wenn er innerhalb des „Vorfahren“ aufgerufen wird. Diese Verschachtelung funktioniert auch über mehrere Ebenen, so dass der Nachfahre nicht der direkte Nachfahre sein muss.
Stylesheet-Datei:
Code:
HTML-Datei:
Code:
Der Kindselektor stellt eine Einschränkung des Nachfahrenselektors dar. Bei diesem Selektor funktioniert die Verschachtelung nur noch, wenn der Selektor der direkte Nachfahre ist und nicht erst in der zweiten oder dritten Ebene aufgerufen wird. Er definiert sich über ein „>“.
Stylesheet-Datei:
Code:
HTML-Datei:
Code:
Der Enkelselektor stellt nun das Gegenteil des Kindselektors dar. Während der Kindselektor nur eine Ebene tiefer vorkommen darf, so muss der Enkelselektor mindestens zwei Ebenen tiefer vorkommen und somit ein Enkel oder Urenkel etc. sein. Er definiert sich durch einen Stern „*“.
Stylesheet-Datei:
Code:
HTML-Datei:
Code:
Der Nachbarselektor bezieht sich nicht auf ineinander geschachtelte, sondern aufeinander folgende Elemente. Dies bedeutet, dass das erste Element wieder geschlossen sein muss, bevor das zweite geöffnet wird. Er definiert sich durch ein „+“.
Stylesheet-Datei:
Code:
HTML-Datei:
Code:
Pseudoklassen erinnern an Klassen-Selektoren mit dem Unterschied, dass sie nicht im Quelltext vorkommen. Sie werden ganz automatisch vom Browser zugewiesen und definieren sich über einen Doppelpunkt „:“.
Im Folgenden will ich euch ein paar interessante Pseudoklassen vorstellen:
Code:
Diese Pseudoklasse wählt immer das erste Kind im Stammbaum aus. Definiert man z.B. „li:first-child“, so kann man immer das erste Listenelement automatisch nach den angegebenen Werten formatieren lassen. :first-child passt genau dann, wenn das Element das erste Kind seines Elternelements ist.
Code:
Diese Pseudoklasse kennt man meist aus der Nutzung von Links über den <a>-Tag. „:link“ steht für noch nicht besuchte Hyperlinks. Man kann ihnen über diese Pseudoklasse z.B. eine Farbe zuordnen.
Code:
Diese Pseudoklasse bildet das Gegenstück zu „:link“, da sie für besuchte Hyperlinks steht. Beide Pseudoklassen schließen sich also gegenseitig aus, da immer nur eine zutreffen kann.
Code:
Diese Pseudoklasse betrifft nun die tastaturseitige Auswahl. Sie kennzeichnet ein Element, welches sich gerade im Tastaturfokus befindet.
Code:
Diese Pseudoklasse ist nicht unbedingt an Hyperlinks gekoppelt. Sie kann auf jedes Element angewendet werden, so lange der Browser das zulässt. „:hover“ betrifft das Element, wenn der Benutzer sich mit dem Mauszeiger darüber befindet.
Code:
Diese Pseudoklasse gehört ebenfalls in die Nutzung von Hyperlinks. Ihre Formatierung trifft zu, wenn der Benutzer den Link gerade anklickt.
Wichtig: Falls man mehrere der Pseudoklassen :link, :visited, :focus, :hover, :active nutzt, muss man sie in genau dieser Reihenfolge im CSS-Text notieren.
Zum Abschluss wollen wir uns noch den Attribut-Selektor anschauen. Er besteht aus dem Attributnamen, welcher sich in einer eckigen Klammer befindet. Je nach Genauigkeit der Definition kann hier noch ein „=“ vorkommen, sowie ein Attributwert, die sich ebenfalls in der Klammer befinden. (Der Internet Explorer versteht Attribut-Selektoren erst ab Version 7.)
Code:
Der Attribut-Selektor gilt für alle Elemente, bei welchen das Attribut „test“ angegeben wird. Welchen Wert dieses Attribut hat, spielt bei dieser Art der Definition keine Rolle. Bei folgendem HTML-Code würde z.B. der Attribut-Selektor zutreffen: <div test=“abc“>.
Code:
Hier wird der Attribut-Selektor genauer definiert. Nun gilt er nur noch für Elemente, die genau diesen Wert gesetzt bekommen haben. So trifft der Attribut-Tag bei folgendem Code zu <h1 test=“wert“>, während er hier <h1 test=“abc“> nicht zutrifft.
Code:
Dieser Attribut-Selektor gilt für alle Elemente, deren Attribut "test" eine Liste mit Werten enthält, in welcher sich auch der angegebene Wert „wert“ befindet. So würde es bei folgendem Beispiel zutreffen: <div test=“abc wert neu“>.
Code:
Dieser Attribut-Selektor ähnelt dem darüber stehenden Selektor, jedoch mit dem Unterschied, dass die Wörter der Liste mit Bindestrichen getrennt sind und der angegebene "wert" das erste Wort sein muss. Beispielweise würde es für das folgende Element zutreffen: <span test=“wert“>, aber auch auf <span test=“wert-abc-neu“>.
Code:
Diese Selektoren, die ab CSS 3 zur Verfügung stehen, wählen Elemente aus, deren Attribut mit dem Text „wert“ beginnt (^=), endet ($=) oder ihn an einer beliebigen Stelle enthält (*=). [test^=“wert“] trifft somit z.B. auf <h1 test=“wertpapier“> zu, sowie auf <span test=“wertebereich“>.
Ich hoffe das Tutorial konnte euch ein wenig weiterhelfen ;)
Liebe Grüße
Tina
Links:
W3C Recommendation CSS 2 Rev.1, ch.5, Selektoren
W3C Working Draft CSS 3, ch. 6.3.2, Attribut-Selektoren
css4you.de: Welcher Browser unterstützt welche Selektoren?
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
Code:
Selektor { Deklarationsblock }
1. Schreibregeln
Beginnen wir zunächst mit ein paar wichtigen Schreibregeln, die bei den Selektoren beachtet werden, da ansonsten nichts funktioniert. Zunächst betreffend der Groß- und Kleinschreibung. Wenn ich einen Selektor z.B. im Stylesheet mit
Code:
.test { color:yellow; } /*Den Punkt erkläre ich später noch */
deklariere, dann muss ich auch beim Aufruf „test“ klein schreiben:
Code:
<p class="test">Dies ist ein gelber Test-Text</p>
Zwar könnte auch „Test“ funktionieren, jedoch sind die Browser hier unterschiedlich, so dass manche eine Unterscheidung in Groß- und Kleinschreibung ablehnen. Grundsätzlich sollte man sich ohnehin angewöhnen eine einheitliche Schreibweise zu verwenden, was auch das restliche Scripten / Programmieren erleichtert.
Es gibt noch weitere Schreibregeln, die beim Umgang mit Selektoren beachtet werden müssen. So darf der Bezeichner eines Selektors aus Groß- oder Kleinbuchstaben des Alphabets (A-Z, a-z), Ziffern (0-9) und dem Bindestrich bestehen. Allerdings darf der Bezeichner nicht mit einer Zahl anfangen. Zwar kann man auch einen Tiefstrich „_“ verwenden, jedoch kann ich das nicht empfehlen, da er nicht von Anfang an zum CSS Standard gehörte und daher von älteren Browsern ggf. auch nicht akzeptiert wird.
2. Der Universal-Selektor
Kommen wir nun zum ersten, richtigen Selektor, welcher auch gleich eine Besonderheit darstellt, der Universal-Selektor. Er gehört zu den Typ-Selektoren, die im nächsten Kapitel genauer erklärt werden. Sein Bezeichner besteht lediglich aus einem Sternchen „*“. Die Angaben in diesem Selektor gelten, wie der Name schon sagt, universal und demnach für jedes einzelne Element.
Stylesheet-Datei:
Code:
* {
text-transform:lowercase;
font-family:arial;
}
text-transform:lowercase;
font-family:arial;
}
HTML-Seite:
Code:
<h1>Eine Überschrift</h1>
<div>Ein div-Tag</div>
<div>Ein div-Tag</div>
Diese Definition würde zu folgender Ausgabe führen:
Code:
eine überschrift
ein div-tag
ein div-tag
3. Der Typ-Selektor
Widmen wir uns als nächstes dem Typ-Selektor. Er verbindet einen Elementtyp (z.B. h1) mit der im Stylesheet definierten Formatierung.
Stylesheet-Datei:
Code:
h1 {
font-size:18px;
color:green;
}
div {
color:red;
font-weight:bold;
}
font-size:18px;
color:green;
}
div {
color:red;
font-weight:bold;
}
HTML-Datei:
Code:
<h1>Eine große, grüne Überschrift</h1>
<div>Ein roter, dicker Text</div>
<div>Ein roter, dicker Text</div>
4. Der ID-Selektor
Der ID-Selektor beginnt mit einem „#“, gefolgt von der ID-Bezeichnung. Über diesen Bezeichner kann man ihn im HTML-Code aufrufen. Der Selektor „#test“ kann somit in <h1 id=“test“> wie auch in <div id=“test“> verwendet werden und hat den gleichen Effekt. Allerdings kann man einen ID-Selektor auch genauer definieren und ihm einen Bezeichner eines HTML-Tags davor setzt, wie z.B. div#test. Wichtig bei einem ID-Selektor ist allerdings, dass man eine ID in einem Dokument nur ein einziges Mal vergeben darf.
Stylesheet-Datei:
Code:
p#test1 {
text-decoration:underline;
font-style:italic;
}
#test2 {
font-size:14px;
color:blue;
}
text-decoration:underline;
font-style:italic;
}
#test2 {
font-size:14px;
color:blue;
}
HTML-Datei:
Code:
<p id="test1">Unterstrichener und kursiver Text</p>
<h1 id="test2">Blaue Überschrift mit Größe 14</h1>
<h1 id="test2">Blaue Überschrift mit Größe 14</h1>
5. Der Klassen-Selektor
Im Folgenden wollen wir uns dem Klassen-Selektor zuwenden. Er zeichnet sich durch einen Punkt aus, gefolgt vom Klassennnamen, also dem Bezeichner. Er wird ähnlich verwendet wie der ID-Selektor. Man kann dem Klassen-Selektor ebenfalls den Bezeichner eines HTML-Tags voranstellen, um klar zu definieren, in welchem Tag diese Klasse verwendet werden kann und wo nicht. Im Gegensatz zum ID-Selektor kann man einem Element jedoch mehrere Klassen-Selektoren zuweisen, die einfach durch ein Leerzeichen angehängt werden.
Stylesheet-Datei:
Code:
h1.test1 {
font-size:18px;
color:green;
}
.test2 {
border:2px solid #cccccc;
}
font-size:18px;
color:green;
}
.test2 {
border:2px solid #cccccc;
}
HTML-Datei:
Code:
<h1 class="test1">Eine 18 Pixel große und grüne Schrift</h1>
<div class="test2">Ein eingerahmter Text</div>
<h1 class="test1 test2">Eine 18 Pixel große, grüne und eingerahmte Schrift</h1>
<div class="test2">Ein eingerahmter Text</div>
<h1 class="test1 test2">Eine 18 Pixel große, grüne und eingerahmte Schrift</h1>
6. Verschachtelungen
Betrachten wir als nächstes die verschiedenen Möglichkeiten einer Verschachtelung. Hier will ich euch vier Selektoren vorstellen: den Nachfahrenselektor, den Kindselektor, den Enkelselektor und den Nachbarselektor.
6.1 Der Nachfahrenselektor
Der Nachfahrenselektor wird definiert, in dem ein Selektor auf einen anderen folgt. Dieser weist die Formatierung nur zu, wenn er innerhalb des „Vorfahren“ aufgerufen wird. Diese Verschachtelung funktioniert auch über mehrere Ebenen, so dass der Nachfahre nicht der direkte Nachfahre sein muss.
Stylesheet-Datei:
Code:
h1 u {
color:blue;
}
div span {
color:red;
}
color:blue;
}
div span {
color:red;
}
HTML-Datei:
Code:
<h1>Eine Überschrift <u>in blau</u> und wieder normal</h1>
<div>Ein Text <p>mit mehreren Verschachtelungen <span>in rot</span>und wieder normal</p></div>
<div>Ein Text <p>mit mehreren Verschachtelungen <span>in rot</span>und wieder normal</p></div>
6.2 Der Kindselektor
Der Kindselektor stellt eine Einschränkung des Nachfahrenselektors dar. Bei diesem Selektor funktioniert die Verschachtelung nur noch, wenn der Selektor der direkte Nachfahre ist und nicht erst in der zweiten oder dritten Ebene aufgerufen wird. Er definiert sich über ein „>“.
Stylesheet-Datei:
Code:
h1 > u {
color:blue;
}
div > span {
color:red;
}
color:blue;
}
div > span {
color:red;
}
HTML-Datei:
Code:
<h1>Eine Überschrift <u>in blau</u> und wieder normal</h1>
<div>Ein Text <p>mit mehreren Verschachtelungen <span>NICHT in rot</span>und noch immer normal</p></div>
<div>Ein Text <p>mit mehreren Verschachtelungen <span>NICHT in rot</span>und noch immer normal</p></div>
6.3. Der Enkelselektor
Der Enkelselektor stellt nun das Gegenteil des Kindselektors dar. Während der Kindselektor nur eine Ebene tiefer vorkommen darf, so muss der Enkelselektor mindestens zwei Ebenen tiefer vorkommen und somit ein Enkel oder Urenkel etc. sein. Er definiert sich durch einen Stern „*“.
Stylesheet-Datei:
Code:
h1 * u {
color:blue;
}
div * span {
color:red;
}
color:blue;
}
div * span {
color:red;
}
HTML-Datei:
Code:
<h1>Eine Überschrift <u>NICHT in blau</u> und noch immer normal</h1>
<div>Ein Text <p>mit mehreren Verschachtelungen <span>in rot</span>und wieder normal</p></div>
<div>Ein Text <p>mit mehreren Verschachtelungen <span>in rot</span>und wieder normal</p></div>
6.4 Der Nachbarselektor
Der Nachbarselektor bezieht sich nicht auf ineinander geschachtelte, sondern aufeinander folgende Elemente. Dies bedeutet, dass das erste Element wieder geschlossen sein muss, bevor das zweite geöffnet wird. Er definiert sich durch ein „+“.
Stylesheet-Datei:
Code:
h1 + u {
color:green;
}
div + span {
color:red;
}
color:green;
}
div + span {
color:red;
}
HTML-Datei:
Code:
<h1>Eine Überschrift <u>NICHT in grün </u></h1><u>jetzt in grün</u>
<div>Ein Text <p>mit Verschachtelung</p><span>NICHT in rot </span></div><span>jetzt in rot</span>
<div>Ein Text <p>mit Verschachtelung</p><span>NICHT in rot </span></div><span>jetzt in rot</span>
7. Pseudoklassen
Pseudoklassen erinnern an Klassen-Selektoren mit dem Unterschied, dass sie nicht im Quelltext vorkommen. Sie werden ganz automatisch vom Browser zugewiesen und definieren sich über einen Doppelpunkt „:“.
Im Folgenden will ich euch ein paar interessante Pseudoklassen vorstellen:
Code:
:first-child
Diese Pseudoklasse wählt immer das erste Kind im Stammbaum aus. Definiert man z.B. „li:first-child“, so kann man immer das erste Listenelement automatisch nach den angegebenen Werten formatieren lassen. :first-child passt genau dann, wenn das Element das erste Kind seines Elternelements ist.
Code:
:link
Diese Pseudoklasse kennt man meist aus der Nutzung von Links über den <a>-Tag. „:link“ steht für noch nicht besuchte Hyperlinks. Man kann ihnen über diese Pseudoklasse z.B. eine Farbe zuordnen.
Code:
:visited
Diese Pseudoklasse bildet das Gegenstück zu „:link“, da sie für besuchte Hyperlinks steht. Beide Pseudoklassen schließen sich also gegenseitig aus, da immer nur eine zutreffen kann.
Code:
:focus
Diese Pseudoklasse betrifft nun die tastaturseitige Auswahl. Sie kennzeichnet ein Element, welches sich gerade im Tastaturfokus befindet.
Code:
:hover
Diese Pseudoklasse ist nicht unbedingt an Hyperlinks gekoppelt. Sie kann auf jedes Element angewendet werden, so lange der Browser das zulässt. „:hover“ betrifft das Element, wenn der Benutzer sich mit dem Mauszeiger darüber befindet.
Code:
:active
Diese Pseudoklasse gehört ebenfalls in die Nutzung von Hyperlinks. Ihre Formatierung trifft zu, wenn der Benutzer den Link gerade anklickt.
Wichtig: Falls man mehrere der Pseudoklassen :link, :visited, :focus, :hover, :active nutzt, muss man sie in genau dieser Reihenfolge im CSS-Text notieren.
8. Der Attribut-Selektor
Zum Abschluss wollen wir uns noch den Attribut-Selektor anschauen. Er besteht aus dem Attributnamen, welcher sich in einer eckigen Klammer befindet. Je nach Genauigkeit der Definition kann hier noch ein „=“ vorkommen, sowie ein Attributwert, die sich ebenfalls in der Klammer befinden. (Der Internet Explorer versteht Attribut-Selektoren erst ab Version 7.)
Code:
[test]
Der Attribut-Selektor gilt für alle Elemente, bei welchen das Attribut „test“ angegeben wird. Welchen Wert dieses Attribut hat, spielt bei dieser Art der Definition keine Rolle. Bei folgendem HTML-Code würde z.B. der Attribut-Selektor zutreffen: <div test=“abc“>.
Code:
[test="wert"]
Hier wird der Attribut-Selektor genauer definiert. Nun gilt er nur noch für Elemente, die genau diesen Wert gesetzt bekommen haben. So trifft der Attribut-Tag bei folgendem Code zu <h1 test=“wert“>, während er hier <h1 test=“abc“> nicht zutrifft.
Code:
[test~="wert"]
Dieser Attribut-Selektor gilt für alle Elemente, deren Attribut "test" eine Liste mit Werten enthält, in welcher sich auch der angegebene Wert „wert“ befindet. So würde es bei folgendem Beispiel zutreffen: <div test=“abc wert neu“>.
Code:
[test|="wert"]
Dieser Attribut-Selektor ähnelt dem darüber stehenden Selektor, jedoch mit dem Unterschied, dass die Wörter der Liste mit Bindestrichen getrennt sind und der angegebene "wert" das erste Wort sein muss. Beispielweise würde es für das folgende Element zutreffen: <span test=“wert“>, aber auch auf <span test=“wert-abc-neu“>.
Code:
[test^="wert"]
[test$="wert"]
[test*="wert"]
[test$="wert"]
[test*="wert"]
Diese Selektoren, die ab CSS 3 zur Verfügung stehen, wählen Elemente aus, deren Attribut mit dem Text „wert“ beginnt (^=), endet ($=) oder ihn an einer beliebigen Stelle enthält (*=). [test^=“wert“] trifft somit z.B. auf <h1 test=“wertpapier“> zu, sowie auf <span test=“wertebereich“>.
Ich hoffe das Tutorial konnte euch ein wenig weiterhelfen ;)
Liebe Grüße
Tina
Links:
W3C Recommendation CSS 2 Rev.1, ch.5, Selektoren
W3C Working Draft CSS 3, ch. 6.3.2, Attribut-Selektoren
css4you.de: Welcher Browser unterstützt welche Selektoren?
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
