Die Selektoren bestimmen, auf welche Weise die CSS-Stile den HTML-Elementen zugewiesen werden. Bei einer entsprechenden Definition gibt man zunächst den Namen des Elements an, auf den der Selektor zugreifen soll. Die eigentliche Deklaration erfolgt anschließend in geschweiften Klammern. Innerhalb einer Deklaration können eine oder mehrere Eigenschaften angegeben werden. Die allgemeine Syntax sieht also folgendermaßen aus:
Selektor {
Eigenschaft1: Wert;
Eigenschaft2: Wert;
Eigenschaft3: Wert;
}Eine entsprechende Definition ist euch im vorherigen Tutorial bereits begegnet.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Achtet unbedingt darauf, jede Deklaration über ein Semikolon zu beenden.
Ein Blick auf die verfügbaren Selektoren
Tatsächlich wartet CSS mit einer recht großen Anzahl an Selektoren auf, von denen ich euch die wichtigsten vorstellen werde. Denn eines ist klar: Nur, wenn man die Arbeit mit den Selektoren beherrscht, kann man überhaupt vernünftig CSS-Eigenschaften definieren.
Die einfachste Möglichkeit, innerhalb eines HTML-Dokuments Stile zuzuweisen, bietet der Element-Selektor.
Durch die folgende Syntax wird allen p-Elementen die Farbe Schwarz zugewiesen.
p {
color: #009966;
}
Wollt ihr mehreren Elementen denselben Stil zuweisen, ist das ebenfalls möglich.
In diesem Fall notiert ihr die betreffenden Elemente einfach nacheinander, jeweils durch ein Komma voneinander getrennt.
p, h1, li {
color: #000;
}
Ihr könnt Elementen auch mehrere Stile zuweisen. Dabei werden die Stile jeweils durch ein Semikolon voneinander getrennt notiert.
p {
color: #000;
background-color: red;
}
Eine Kombination der genannten Varianten ist ebenfalls möglich.
p, h1, li {
color: #009966;
background-color: red;
}
Das Ergebnis könnte so aussehen:
Bereiche mit mehreren Elementen
Oftmals besteht die Notwendigkeit, einen Bereich zu formatieren, der aus mehreren HTML-Elementen besteht. Für solche Fälle gibt es in HTML mit span und div zwei spezielle Elemente. Diese Elemente werden euch – übrigens auch in dieser Reihe – immer wieder begegnen.
Ein Beispiel:
<div class="artikel"> <h1>Farbexplosion</h1> <p class="thema">Ein Tutorial zur Erstellung von Farbexplosion von <span class="autor">MarkusMelzer</span>.</p> </div>
Der einzige Unterschied zwischen div und span liegt darin, dass das div-Element eine neue Zeile im Textfluss erzwingt. span hingegen erzeugt keine neue Zeile. Im gezeigten Beispiel wird ein div-Bereich definiert, in dem eine Überschrift und ein Textabsatz enthalten sind. Innerhalb des Textabsatzes wiederum gibt es einen span-Bereich.
ID- und Klassenselektoren
Bislang wurden Elementselektoren verwendet. Durch das folgende Beispiel werden durch einen solchen Selektor alle h1-Überschriften formatiert.
h1 {
color: #000;
background-color: red;
}
Das ist in dieser Form aber natürlich nicht immer gewünscht. Was beispielsweise, wenn ihr nur einer oder einigen, nicht aber allen h1-Überschriften bestimmte Eigenschaften zuweisen wollt? Für solche Fälle bietet CSS zwei Möglichkeiten, nämlich die Klassen- und die ID-Selektoren.
Mit Klassenselektoren können HTML-Elemente mit Klassenattributen ganz gezielt selektiert werden. Im betreffenden HTML-Element muss dazu das Attribut class angegeben werden. Klassendefinitionen beginnen mit einem Punkt.
Ein Beispiel:
.rot {
color: red;
}
Hier wurde die Klasse rot definiert. Um die rot zugewiesenen Eigenschaften nun einem HTML-Element hinzufügen, gibt man class gefolgt vom Klassennamen an.
<p class="rot">PSD-Tutorials.de</p>
Der ID-Selektor lässt sich ähnlich einfach verwenden. Zu erkennen ist der ID-Selektor an einem Doppelkreuz.
#topnavi {
color: blue;
};In diesem Beispiel wird die ID topnavi definiert. Aber Achtung: Eine ID darf innerhalb eines Dokuments tatsächlich nur einmal zugewiesen werden. Der Zugriff auf eine definierte ID-Eigenschaft sieht dann folgendermaßen aus:
<div id="topnavi">Hier steht die Navigation</div>
Dem Attribut id weist man den ID-Namen zu. Achtet darauf, dass hier dann das Doppelkreuz nicht notiert wird.
Die gezeigten Angaben lassen sich übrigens auch miteinander kombinieren. So kann man einem HTML-Element beispielsweise mehrere Klassen zuweisen.
<p class="rot gross">PSD-Tutorials.de</p>
In diesem Beispiel werden dem Textabsatz die beiden Klassen rot und gross zugewiesen. Wollt ihr eine Klasse und eine ID angeben, sieht das hingegen folgendermaßen aus:
<p class="rot" id="navi">PSD-Tutorials.de</p>
Ebenso könnt ihr Elemente und IDs miteinander kombinieren. Auch hierzu ein Beispiel:
div.navi {
color: blue;
}
Diese Syntax würde ausschließlich auf div-Elemente mit der Klasse navi zutreffen. p-Elemente, die ebenfalls die Klasse navi besitzen, blieben davon unberührt.
In CSS gibt es noch eine weitere Art der Kombination von Selektoren. Werft dafür einen Blick auf die folgende Syntax:
h1 {
color: red;
}
em {
color: blue;
}
Hier wird allen Überschriften der ersten Ordnung die Farbe Rot zugewiesen. em-Elemente bekommen hingegen die Farbe Blau.
Durch eine Kombination der beiden Anweisungen kann man nun aber dafür sorgen, dass nur die em-Elemente blau eingefärbt werden, die sich innerhalb von h1-Elementen befinden.
h1 em {
color: blue;
};
Die Elementnamen werden hier ohne Kommata voneinander getrennt notiert.
Das ist übrigens eine beliebte Fehlerfalle, in die gerade auch CSS-Einsteiger tappen. Hier dieselbe Syntax, in der allerdings ein Komma gesetzt wurde:
h1, em {
color: blue;
}
Was bedeutet diese Syntax? Es werden alle h1- und alle em-Elemente angesprochen. Das ist also etwas völlig anderes, als die Syntax ohne Komma!
Ein weiterer wichtiger Selektor ist der Universalselektor. Dieser ermöglicht die Auswahl eines beliebigen Elements. Definiert wird dieser Selektor über einen Asterisk.
* {
color: red;
}
Durch diese Syntax würden alle Elemente rot eingefärbt. Auch bei diesem Selektor sind wieder einige Syntaxbesonderheiten zu berücksichtigen.
#mainnavi * {
color: red;
}
In diesem Beispiel wird die Vordergrundfarbe aller Elemente innerhalb des Elements mit der ID mainnavi auf Rot gesetzt. Das gilt allerdings nicht für das Element selbst.
Wenn der Universalselektor am Anfang einer Deklaration stehen würde, bräuchte man ihn übrigens nicht zu notieren. So etwas hier wäre also überflüssig:
* p {
color: red;
}
Diese Syntax ist mit folgender gleichbedeutend:
p {
color: red;
}
Im nächsten Tutorial werdet ihr weitere Selektoren kennenlernen.
