CSS Selektoren
Einleitung
Im Folgenden Artikel werden Sie eine kleine Einführung zum Aussehen einer CSS-Regel erhalten (und was eigentlich ein CSS Selektor ist), danach finden sie eine Übersicht über die vorhandenen CSS Selektoren vor und zum Schluss werde ich etwas über den Nutzen des intelligenten Verwendens von CSS Selektoren erzählen.
CSS Regel
Ein CSS Dokument besteht aus einer Vielzahl an CSS Regeln, ist also eine Ansamlung dieser Regeln. Nun stellt sich im Zusammenhang mit dem CSS Selektor die Frage, welcher Teil der Regel er eigentlich ist. Dazu ist ein tieferes Verständnis über den Aufbau einer CSS-Regel hilfreich:
Aufbau einer CSS-Regel
Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock.
Selektor Deklarationsblock
Der Selektor
Der CSS Selektor steht vor dem Deklarationsblock und gibt an auf was der Deklarationsblock angewendet werden soll.
Der Deklarationsblock
Der Deklarationsblock legt fest was mit dem Element auf das er angewendet wird geschieht. Er besteht aus einer Liste verschiedener Deklarationen, die durch einen Semikolon (';') getrennt sind.
Selektor {
Deklaration1;
Deklaration2;
Deklaration3; }
Die Deklaration
Eine Deklaration besteht aus der Deklarationsform und dem ihr zugewiesenen Wert bzw. den ihr zugewiesenen Werten. Die Werte werden durch einen Doppelpunkt (':')von der Deklarationsform getrennt.
Selektor {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Hier ein Beispiel. Dem Selektor p (also ein Paragraph) werden folgende Deklarationen zugewiesen:
p {
margin: 2px;
padding: 0.5em 0;
display: block; }
Verschiedene Selektoren
Nun, da Sie das Grundlegenste wissen will ich Sie mal mit den verschiedenen Selektoren und ihren Anwendungsbereichen bekannt machen.
Universal-Selektor
Der Universal-Selektor legt für jedes Element Stylesheetangaben fest. Der Universal-Selektor ist ein ('*')
* {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Hier ein Beispiel: Es werden für alle Elemente padding und margin auf 0 gesetzt. Was relativ nützlich sein kann, nebenbei gesagt.
* {
margin: 0;
padding: 0; }
Typ-Selektor
Der Typ-Seketor legt für einen HTML-Tag Stylesheetangaben fest. Hier finden Sie eine Umfassende Sammlung aller HTML-Tags.
HTML-Tag {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Oder hier an einem Beispiel: Es werden dem HTML-Tag 'h1' padding, Schriftart und Schriftgrösse zugewiesen:
h1 {
padding: 0.5em 0 0.5em 1em;
font-family: 'Optimus Princeps', Georgia, serif;
font-size: 1.5em; }
Klasse-Selektor
Der Klasse-Selektor wird im HTML durch ein class="selektorname" eingefügt. Er wird dann nur auf Elemente angewendet, die diese Klasse haben. Man kann einen Klasse Selektor beliebig benennen, wobei er aber mit einem Buchstaben beginnen muss, und nur Kleinbuchstaben ('a-z'), Ziffern ('0-9') und Bindestriche ('-') enthalten darf. In der CSS-Datei wird er von einem Punkt ('.') eingeleitet
<span class="selektorname">Das ist ein Text</span>
.selektorname {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
ID-Selektor
Der ID-Selektor wird wie der Klasse-Selektor im HTML eingefügt und zwar durch id="selektorname". Und auch er wird nur auf Elemente mit dieser ID angewendet. der Selektorname ist frei wählbar mit den selben Einschränkungen wie beim Klassen Selektor. Er wird von einer Raute ('#') eingeleitet.
<div id="selektorname">Das ist ein Text</div>
#selektorname {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Selektoren erweitern/kombinieren
Man kann Selektoren durch weitere Attribute erweitern und kombinieren.
Pseudo-Selektoren
Pseudo-Selektoren werden dann angewandt, wenn wenn normale Selektoren nicht mehr ausreichen um das Element anzusprechen, dabei werden die Pseudo-Selektoren in zwei Untergruppen unterteilt: Pseudolelemente und Pseudoklassen. Mit Pseudoelementen werden Teile eines Elementes mit Stylesheetangaben verknüpft. Mit Pseudoklassen werden Elemente mit einem bestimmten Zusaten mit Stylesheetangaben verknüpft. Pseudo-Selektoren werden immer durch einen Doppelpunkt (':') an einen Selektor angehängt.
Pseudolelemente
Zu den Pseudoelementen zählen 'before', 'after', 'first-letter' und 'first-line'.
'before' und 'after'
'before' und 'after' fügen vor bzw nach einem Element einen Text ein. Dieser Text wird mit content: 'Text'; spezifiert und kann auch noch durch andere Deklarationen weiter formatiert werden.
Selektor1:before {
content: 'Text';
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Oder hier an einem Beispiel. Dem HTML Tag <code></code> wird durch ein Pseoudelement einen Text vorangestellt;
<code>Quellcode</code>
code:before {
content: 'Code';
font-weight: bold;
display: block; }
'first-letter' und 'first-line'
'first-letter' und 'first-line' sprechen den ersten Buchstaben bzw. die erste Line eines Textes an.
Selektor1:first-letter {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Damit kann man z.B. dem ersten zeichen eines Textes ein anderes Aussehen verleihen. Hier habe ich die Schriftrösse und Schriftart verändert. es wäre also das 'D' gross und in Optmus Princeps.
<div id="content">Das ist ein Text</div>
#content:first-letter {
font-size: 2em;
font-family: 'Optimus Princeps', Georgia, serif; }
Pseudoklasse
Zu den Pseudoklassen zählen 'link', 'visited', 'hover', 'active', 'first-child', 'focus' und 'lang'
'link' und 'visited'
'link' und 'visited' werden nur auf Hyperlinks angewendet. 'link' spricht den normalen Link an, 'visited' den bereits besuchten Link. Mit den beiden Pseudoklassen können alle Selektoren ausgezeichnet werden, angesprochen werden dann einfach die Links, die sich in den angesprochenen Elementen befinden.
Selektor1:link {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Und hier noch an einem Beispiel:
<div id="content"> Das ist ein Text
<a href="/" title="Link">und das ein Link</a>
und das wieder ein Text
</div>
#content:link {
color: red;
text-decoration: underline; }
'hover' und 'active'
Auch diese beiden Pseudoklassen werden am meisten auf Links angewendet, sie können aber auch auf andere Objekte angewendet werden. Ein mit dieser Pseudoklasse ausgezeichneter Selektor wendet die zugewiesenen Stylesheetangaben dann auf das Element an, wenn man mit dem Mauszeiger darüber fährt ('hover') bzw. wenn man draufgeklickt hat ('active').
Selektor1:hover {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Um dies noch an einem Beispiel zu zeigen: Hier würde jetzt bem darüberfahren über das Element die Hintergrundfarbe auf Rot wechseln und die Schriftgrösse würde kleiner werden.
<div id="content">Das ist ein Text</div>
#content:hover {
background: red;
font-size: 0.5em; }
Um einem Link beizubringen müsste man einfach den Pseudoselektor dem Link zuweisen.
a:hover {
color: red;
text-decoration: underline; }
'first-child'
Der 'first-child' Selektor spricht das erste Unterelement des Elements an, das der Selektor an den er angehängt ist anspricht.
Selektor1:first-child {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Vieleicht ist dies Anhand eines Beispiels besser verständlich. Das erste Kind des Elementdes <div id="content"></div> ist der erste Paragraph. Dieser wird nun anders dargestellt als alle folgenen Paragraphen.
<div id="content">
<p>Das ist der erste Paragraph</p>
<p>Das ist der zweite Paragraph</p>
<p>Das ist der dritte Paragraph</p>
</div>
#content:first-child {
font-weight: bold;
font-size: 1.2em; }
'focus'
Mit der Pseudoklasse 'focus' werden Formularelemente angesprochen, sobald man auf sie klickt, oder mit Tabulatortaste aktiviert.
Selektor1:focus {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
'lang'
Die Pseudoklasse 'lang' spricht Elemente an, wenn eine bestimmte Sprache eingestellt ist.
Selektor1:lang(Sprache) {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Wenn nun die eingestellte Sprache Englisch wäre, so würde sich bei diesem Beispiel der Text Rot färben.
<div id="content">Das ist ein Text</div>
#content:lang(en) { color: red; }
Attribut-Selektoren
Attribut-Selektoren werden dann angewandt wenn das zu formatierende Element ein definiertes Attribut enthält. Attribut-Selektoren werden wie die Pseudoselektoren an einen Selektor angehängt. Es gibt sieben verschiedenen Attribut-Selektoren:
[attribut]
Der erste und einfachste Attributselektor ist [attribut]. Er prüft ob das Element das spezifizierte Attribut enthält und wendet die Stylesheetangaben an, wenn es vorhanden ist
<div id="content" attribut>Das ist ein Text</div>
#content[attribut] {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Hier an einem nützlichen Beispiel: Links mit einem titel-Atribut (title="") werden farbig anders gekennzeichnet, dabi ist es egal was und ob überhaupt etwas zwischen den beiden Gänsefüsschen steht.
<a href="/" title="Link">Das ist ein Link</a>
a[title] {
color: green;
text-decoration: dotted; }
[attribut='wert']
Mit diesem Attribut-Selektor wird geprüft ob ein bestimmtes Attribut einem bestimmten Wert entspricht.
<div id="content" attribut="wert">Das ist ein Text</div>
#content[attribut='wert'] {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Damit kann man z.B. externe Links anders kennzeichnen als andere Links:
<a href="/" title="Link" rel="external">Das ist ein Link</a>
a[rel='external'] {
color: yellow;
text-decoration: none; }
[attribut~='wert']
Mit dem Attribut-Selektor [attribut~='wert'] wird geprüft ob bei Attributen mit mehreren, durch Leerzeichen getrennten, Werten (also attribut="wert1 wert2 wert3") einer der Werte übereinstimmt.
<div id="content" attribut="wert1 wert2 wert3">Das ist ein Text</div>
#content[attribut~='wert2'] {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
[attribut|='wert']
Dieser Attributselektor lässt Attributwerte nur zu wenn sie exakt übereinstimmen, oder von einem Bindestrich gefolgt werden.
<div id="content" attribut="wert">Das ist ein Text</div>
<div id="content" attribut="wert-2">Das ist auch ein Text</div>
#content[attribut|='wert'] {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
[attribut^='wer'], [attribut$='ert'] und [attribut*='er']
Diese Selektoren prüfen ob der Anfang des Attributwertes übereinstimmt ([attribut^='wer']) bzw. ob das Ende des Attributwertes übereinstimmt ([attribut$='ert']) bzw. ob ein Teil des Attributwertes übereinstimmt ([attribut*='er']).
<div id="content" attribut="wert">Das ist ein Text</div>
#content[attribut^='wer'] {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Abhängiger-Selektor
Man kann zwei oder mehr Selektoren in Abhängigkeit zueinander beschreiben indem man sie durch ein Leerzeichen trennt. Dabei wird der Deklarationsblock nur angewendet, wenn sich der zweite Selektor im Element des ersten Selektors befindet. (Er muss also kein direktes Kindelement sein)
Selektor1 Selektor2 {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Hier ein Beispiel, in dem Links, die sich innerhalb einer Div-Box mit dem Attribut id="content" befinden, gesondert (nämlich orange) gekennzeichnet sind:
<div id="content">
<p>erster Paragraph</p>
<p> Das ist ein Text des zweiten Paragraphs
<a href="/" title="Link">und das ein Link</a>
und das wieder ein Text
</p>
<p>dritter Paragraph</p>
</div>
#content a {
color: orange;
font-weight: bold; }
Kind-Selektor
Man kann zwei Selektoren auch in Abhängigkeit zueinander beschreiben indem man sie mit einem '<' verbindet. Dabei wird der Deklarationsblock nur angewendet, wenn der zweite Selektor ein Kindelement des ersten selektors ist, sich also direkt in diesem Element befindet.
Selektor1 > Selektor2 {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Hier ein Beispiel, in dem Links, die sich innerhalb eines Paragraphs befinden, gesondert (nämlich cyan) gekennzeichnet sind:
<p">
Das ist ein Text
<a href="/" title="Link">und das ein Link</a>
und das wieder ein Text
</p>
p > a {
color: cyan;
font-weight: bold; }
Tiefen-Selektor
Der Tiefen-Selektor zeichnet Elemente aus, die mindestens zwei Ebenen tiefer sind. Der Dekorationsblock wird dabei nur angewendet wenn der zweite Selektor mindestens zwei Ebenen tiefer ist als der erste Selektor. Dazu werden die Selektoren durch ein '*' getrennt.
Selektor1 * Selektor2 {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
Hier ein Beispiel, in dem Links, die sich innerhalb des bodys mindestens zwei Ebenen tiefer befinden, gesondert (nämlich weiss) gekennzeichnet sind:
<body>
<div id="content">
<p>erster Paragraph</p>
<p> Das ist ein Text des zweiten Paragraphs
<a href="/" title="Link">und das ein Link</a>
und das wieder ein Text
</p>
<p>dritter Paragraph</p>
</div>
</body>
body * a {
color: white;
font-weight: bold; }
Geschwister-Selektor
Hier werden die Stylesheetangaben nur angewendet wenn das Element des zweiten Selektors direkt auf das des ersten folgt. Er darf zudem kein Kindelement des Elements sein. Sie werden durch ein Pluszeichen '+' verknüpft
Selektor1 + Selektor2 {
Deklarationsform1: Wert;
Deklarationsform2: Wert1 Wert2 Wert3; }
In diesem Beispiel wird nur der erste Paragraph rot und fett geschrieben:
<h1"></h1">
<p>erster Paragraph</p>
<p>zweiter Paragraph</p>
<p>dritter Paragraph</p>
h1 + p {
color: red;
font-weight: bold; }
Conclusio
Der Nutzen einiger dieser eher komplizieren Selektoren ist zum einen eine erhebliche Reduzierung des Umfangs der CSS-Datei, aber man kann auch spezifischere Ansprechungen vornehmen und so mit CSS viel mehr interessantes Anstellen.
