03586 – 3684921
support@seo-lausitz.de
In diesem Tutorial erfahren Sie, welche Selektoren es gibt, wie Sie CSS-Selektoren verwenden. Weiterhin werden wir lernen wie Stilregeln auf Elemente angewendet werden.
Bevor wir mit der Einführung der CSS-Selektoren beginnen können, sollten wir klären, was ein CSS-Selektor ist. Einfach ausgedrückt ist er eine Zuordnung im CSS zu einem Element auf der Webseite. Die diesem Selektor zugeordnete Stilregeln werden auf die Elemente angewendet, die dem Selektor entsprechen.
Selektoren sind einer der wichtigsten Aspekte von CSS, da sie es Ihnen ermöglichen, bestimmte Elemente auf Ihrer Webseite auf verschiedene Weise anzusprechen, damit sie gestylt werden können.
In CSS stehen verschiedene Arten von Selektoren zur Verfügung, deshalb werfen wir einen genaueren Blick darauf:
Der universelle Selektor, gekennzeichnet durch ein Sternchen (*), stimmt mit jedem einzelnen Element auf der Seite überein.
Er kann weggelassen werden, wenn andere Bedingungen für das Element vorliegen. Dieser Selektor wird häufig verwendet, um die z.B. Standardränder
und -abstände für schnelle Testzwecke von Elementen zu entfernen.
Probieren wir das folgende Beispiel aus, um zu verstehen, wie es grundsätzlich funktioniert:
* {
margin: 0;
padding: 0;
}
Die Stilregeln im *-Selektor werden auf jedes Element in einem Dokument angewendet.
Hinweis: Es wird empfohlen , den universellen Selektor (*) in einer Produktionsumgebung nicht zu oft zu verwenden.
Da dieser Selektor auf jedes Element auf einer Webseite passt, belastet dies den Browser des Webseitenbesuchers stark.
Verwenden Sie stattdessen den Elementtyp- oder Klassenselektor.
Ein Element-Selektor gleicht alle Instanzen des Elements im Dokument mit dem entsprechenden Element-Namen ab. Lassen Sie uns ein Beispiel ausprobieren, um zu sehen, wie es tatsächlich funktioniert:
p {
color: red;
}
Die Stilregeln innerhalb des p-Selektors werden auf jedes <p>-Element (oder jeden Absatz) im Dokument angewendet. Dies geschieht unabhängig von der Position im des Elementes im Quellcode
Der ID-Selektor wird verwendet, um Stilregeln für ein einzelnes bzw. eindeutiges Element zu definieren. Er wird mit einem Rautezeichen ( #) direkt gefolgt vom ID-Wert definiert.
#error {
color: blue;
}
Wenn ein Element also die ID "error" hat, wird der Text blau gefärbt.
Achtung: Der Wert eines id-Attributs muss innerhalb eines bestimmten Dokuments eindeutig sein – das heißt, dass keine zwei Elemente in Ihrem HTML-Dokument denselben id-Wert haben dürfen.
Die Klassenselektoren können verwendet werden, um jedes HTML-Element auszuwählen, das über ein class-Attribut verfügt. Alle Elemente dieser Klasse werden gemäß der definierten Regel formatiert. Sie werden mit einem Punktzeichen (. gefolgt vom Klassennamen definiert.)
Beispiel:
.yellow {
color: yellow;
}
Die obigen Stilregeln färbt den Text jedes Elements im Dokument, dessen classAttribut auf "blue" gesetzt ist, in Blaue. Es geht aber auch noch etwas spezifischer. Beispiel:
p.blue {
color: blue;
}
Dieses Beispiel färbt alle Texte in einem Paragraph (p) in Blau, welche die Klasse "blue" haben. Alle anderen <p> bleiben davon unberühert.
Sie können diese Selektoren verwenden, wenn Sie ein Element auswählen müssen, das ein Nachkomme eines anderen Elements ist. Wenn Sie zum Beispiel in einem Menü nur den Anker (<a>)
stylen möchten, dann sieht dies so aus:
ul.menu li a {
text-decoration: none;
}
Die Stilregeln innerhalb des Selektors ul.menu li agelten nur für die <a>-Elemente, die in einem <ul>-Element mit der Klasse .menu enthalten sind.
Auch hier hat diese Stilanpassung keine Auswirkung auf die anderen Links im restlichen Dokument.
Ein untergeordneter Selektor wird verwendet, um nur die Elemente auszuwählen, die einem Element direkt untergeordnet sind.
Ein untergeordneter Selektor besteht aus zwei oder mehr Selektoren, die durch ein Größer-als-Symbol (>) getrennt sind.
Mit diesem Selektor können Sie beispielsweise die erste Ebene von Listenelementen innerhalb einer verschachtelten Liste mit mehr als einer Ebene auswählen.
Um zu verstehen, wie das ganze funktioniert, schauen wir uns am besten das folgende Beispiel an:
ul > li {
list-style: square;
}
ul > li ol {
list-style: none;
}
Die Stilregel innerhalb des Selektors ul > ligilt nur für die <li>-Elemente, die den <ul>Elementen direkt untergeordnet sind. Sie hat keine Auswirkungen auf andere Listenelemente.
Die benachbarten Geschwisterselektoren können verwendet werden, um Geschwisterelemente (dh Elemente auf derselben Ebene) auszuwählen. Der Syntax lautet dabei: Element1 + Eelement2, wobei Element2 das Ziel des Selektors ist.
h1 + p {
color: blue;
font-size: 20px;
}
Im diesem Beispiel wählt der Selektor h1 + p das <p> nur dann aus, wenn folgende Bedingungen eintreffen:
<h1> und <p> haben das gleiche Elternelement<p> steht direkt nach dem <h1>Der allgemeine Geschwisterselektor ähnelt dem benachbarten Geschwisterselektor (Element1 + Element2), ist jedoch weniger streng.
Ein allgemeiner Geschwisterselektor besteht aus zwei einfachen Selektoren, die durch Tilde (~) getrennt sind. Es kann wie folgt geschrieben werden: Element1 ∼ Element2, wobei Element2 auch hier wieder das Ziel des Selektors ist.
Der Selektor h1 ∼ pim folgenden Beispiel wählt alle <p>-Elemente aus, denen das <h1>-Element vorausgeht , wobei alle Elemente dasselbe übergeordnete Element im Dokumentbaum haben.
h1 ∼ p {
color: blue;
font-size: 18px;
}
Es gibt noch andere kompliziertere Selektoren wie z.B: Attribut-Selektoren, Pseudoklassen und Pseudo-Elemente. Wir werden diese Selektoren in den nächsten Kapiteln noch ausführlich besprechen.
Häufig verwenden mehrere Selektoren in einem Stylesheet dieselben Style-Deklaration. Sie können sie in einer durch Kommas getrennten Liste gruppieren, um den Code in Ihrem Stylesheet zu minimieren. Hier ein Beispiel einiger ungruppierter Stilregeln:
h1 {
font-size: 36px;
font-weight: normal;
}
h2 {
font-size: 28px;
font-weight: normal;
}
h3 {
font-size: 22px;
font-weight: normal;
}
Wie Sie im obigen Beispiel sehen können, wird dieselbe Regel (font-weight: normal;) von drei Selektoren verwendet. Dies kann man nun, durch Komma getrennt, einfach gruppieren:
h1, h2, h3 {
font-weight: normal;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}