CSS-Selektoren
Einführung in CSS-Selektoren
CSS-Selektoren sind ein grundlegendes Konzept in der Webentwicklung, mit dem Sie bestimmte HTML-Elemente auf einer Webseite auswählen und gestalten können. Es handelt sich um Muster, die verwendet werden, um die Elemente auszuwählen, die Sie stylen möchten, basierend auf ihrem Typ, ihrer Klasse, ID, ihrem Attribut oder ihrer Beziehung zu anderen Elementen.
CSS-Selektoren geben Ihnen die Kontrolle über das Styling Ihrer Webseiten. Mit Selektoren können Sie Stile auf bestimmte Elemente oder Gruppen von Elementen anwenden, basierend auf bestimmten Bedingungen. Diese Präzision ermöglicht es Ihnen, konsistente und wartbare Stile für Ihre gesamte Website zu erstellen.
Die grundlegende Syntax eines CSS-Selektors besteht aus dem Selektornamen, gefolgt von geschweiften Klammern {}. Innerhalb der geschweiften Klammern definieren Sie die Stile, die Sie anwenden möchten.
Beispiel: Wählen Sie alle Absatzelemente aus und machen Sie ihre Textfarbe blau
p {
color: blue;
}p ist der Selektor, der alle <p>-Elemente auswählt, und color: blue; setzt die Textfarbe.
CSS-Selektoren können komplexer sein als nur Elemente anhand ihres Tag-Namens auszuwählen. Sie können Klassennamen, IDs, Attribute und verschiedene andere Selektoren verwenden, um bestimmte Elemente oder Gruppen davon auszuwählen. Die folgenden Abschnitte behandeln verschiedene Arten von CSS-Selektoren und wie Sie sie in Ihren Stylesheets verwenden können.
Arten von CSS-Selektoren
CSS bietet verschiedene Arten von Selektoren, mit denen Sie Elemente anhand verschiedener Kriterien auswählen können.
Element-Selektoren
Element-Selektoren wählen Elemente basierend auf ihrem Tag-Namen aus. Sie selektieren alle Instanzen eines bestimmten HTML-Elements auf einer Seite.
Um einen Element-Selektor zu verwenden, nutzen Sie einfach den Tag-Namen ohne Präfix.
Beispiel: Wähle alle <h1>-Elemente aus und mache ihren Text rot
h1 {
color: red;
}Weitere Beispiele sind p, div, a, img.
Klassen-Selektoren
Klassen-Selektoren wählen Elemente basierend auf ihrem Klassenattribut aus. Sie ermöglichen die Auswahl von Elementen, die zu einer bestimmten Klasse gehören.
Um einen Klassen-Selektor zu erstellen, verwenden Sie einen Punkt (.) gefolgt vom Klassennamen.
Beispiel: Wähle Elemente mit der Klasse 'highlight' aus und gib ihnen einen gelben Hintergrund
.highlight {
background-color: yellow;
}Sie können eine Klasse auf ein Element anwenden, indem Sie das class-Attribut zum HTML-Tag hinzufügen:
Beispiel: Eine Klasse auf ein Element anwenden
<p class="highlight">Dieser Absatz wird einen gelben Hintergrund haben.</p>Ein Element kann mehrere Klassen haben, indem sie durch Leerzeichen getrennt werden:
Beispiel: Ein Element mit mehreren Klassen
<p class="highlight bold">Dieser Absatz wird einen gelben Hintergrund und fetten Text haben.</p>ID-Selektoren
ID-Selektoren wählen Elemente basierend auf ihrem eindeutigen ID-Attribut aus. Sie selektieren ein Element mit einer bestimmten ID.
Um einen ID-Selektor zu erstellen, verwenden Sie ein Rautezeichen (#) gefolgt vom ID-Namen.
Beispiel: Wähle das Element mit der ID 'header' aus und mache seinen Text großgeschrieben
#header {
text-transform: uppercase;
}Sie können eine ID auf ein Element anwenden, indem Sie das id-Attribut zum HTML-Tag hinzufügen:
Beispiel: Eine ID auf ein Element anwenden
<h1 id="header">Diese Überschrift wird großgeschrieben sein.</h1>Der Hauptunterschied zwischen Klassen und IDs besteht darin, dass IDs einzigartig sind und nur einmal pro Seite verwendet werden, während Klassen mehrfach wiederverwendet werden können.
Attribut-Selektoren
Attribut-Selektoren wählen Elemente basierend auf ihren Attributen oder Attributwerten aus.
Um einen Attribut-Selektor zu erstellen, verwenden Sie eckige Klammern ([]) und geben Sie den Attributnamen oder sowohl Namen als auch Wert an.
Beispiel: Wähle alle <a>-Elemente mit dem 'target'-Attribut aus und mache ihren Text fett
a[target] {
font-weight: bold;
}Sie können auch Elemente basierend auf Werten auswählen:
Beispiel: Wähle alle <input>-Elemente mit type='text' aus und gib ihnen Ränder
input[type="text"] {
border: 1px solid black;
}Attribut-Selektoren bieten Flexibilität bei der Auswahl basierend auf Attributen.
Nachfahren-Selektoren
Nachfahren-Selektoren wählen Nachfahren eines anderen Elements aus.
Um diesen Selektor zu erstellen, verwenden Sie ein Leerzeichen zwischen Vorfahren- und Nachfahren-Selektoren.
Beispiel: Wähle alle <p> innerhalb von <div> aus
div p {
font-style: italic;
}Dies wählt alle <p> innerhalb jeder Verschachtelungsebene in <div> aus.
Kind-Selektoren
Kind-Selektoren wählen direkte Kinder eines anderen Elements aus.
Verwenden Sie das Größer-als-Zeichen (>) zwischen Eltern-Kind für diesen Selektor:
Beispiel: Wähle direkte Kinder <li> in <ul> aus
ul > li {
list-style-type: none;
}Der Unterschied zum Nachfahren-Selektor besteht darin, dass der Kind-Selektor nur unmittelbare Kinder auswählt.
Angrenzender Geschwister-Selektor
Der angrenzende Geschwister-Selektor wählt benachbarte Geschwister aus, die den gleichen Elternteil haben und direkt nebeneinander stehen, unter Verwendung eines Pluszeichens (+).
Beispiel: Wähle das erste <p> unmittelbar nach <h2> aus
h2 + p {
margin-top: 10px;
}Dies wählt das erste <p> nach <h2> aus.
Allgemeiner Geschwister-Selektor
Der allgemeine Geschwister-Selektor wählt Geschwister aus, die den gleichen Elternteil haben, aber nicht unbedingt nebeneinander stehen müssen, unter Verwendung einer Tilde (~).
Beispiel: Wähle alle <p>-Geschwister von <h2> aus
h2 ~ p {
padding-left: 20px;
}Dies wählt alle <p>-Geschwister in beliebiger Position relativ zu <h2> aus.
Pseudo-Klassen-Selektor
Pseudo-Klassen wählen Elemente basierend auf einem bestimmten Zustand oder einer bestimmten Bedingung aus, unter Verwendung eines Doppelpunkts (:) gefolgt vom Namen.
Beispiel: Ändere die Farbe beim Überfahren mit der Maus
a:hover {
color: red;
}Weitere Beispiele sind :active, :focus, :visited, :first-child.
Pseudo-Element-Selektor
Pseudo-Elemente ermöglichen die Auswahl und Gestaltung von Teilen, ohne die HTML-Struktur zu ändern, unter Verwendung eines doppelten Doppelpunkts (::) gefolgt vom Namen.
Beispiel: Füge Inhalt vor jedem <h1> ein
h1::before {
content: "→";
}Weitere Beispiele sind ::after, ::first-letter, ::first-line.
Kombination von Selektoren
CSS ermöglicht die Kombination mehrerer Selektoren, um spezifischere Stile zu erstellen. Durch die Verwendung einer Kombination von Selektoren können Sie Stile auf Elemente anwenden, die mehrere Kriterien erfüllen.
Um Selektoren zu kombinieren, schreiben Sie sie nacheinander ohne Leerzeichen dazwischen. Die Reihenfolge der Selektoren ist wichtig, da sie die Spezifität bestimmt und wie die Stile angewendet werden.
Beispiel: Alle <p>-Elemente mit der Klasse 'highlight' innerhalb eines <div> ansprechen
div p.highlight {
background-color: yellow;
font-weight: bold;
}Bei der Kombination von Selektoren ist es wichtig, Spezifität und Kaskadenreihenfolge zu verstehen. Die Spezifität bestimmt, welche Stile Vorrang haben, wenn mehrere Selektoren das gleiche Element ansprechen. Je spezifischer ein Selektor ist, desto höher ist seine Priorität.
Die Spezifitätsreihenfolge von höchster zu niedrigster ist:
- Inline-Stile (direkt mit dem
style-Attribut angewendet) - ID-Selektoren
- Klassen-Selektoren, Attribut-Selektoren und Pseudo-Klassen-Selektoren
- Element-Selektoren und Pseudo-Element-Selektoren
Wenn zwei Selektoren die gleiche Spezifität haben, hat derjenige Vorrang, der später im Stylesheet erscheint.
Beispiel: Spezifität verstehen
/* Element-Selektor */
p {
color: black;
}
/* Klassen-Selektor */
.highlight {
color: blue;
}
/* ID-Selektor */
#special {
color: red;
}<p class="highlight" id="special">Dieser Absatz wird roten Text haben.</p>Der Absatz wird roten Text haben, da der ID-Selektor die höchste Spezifität hat.
Halten Sie bei der Kombination von Selektoren Ihre Auswahlen so einfach und spezifisch wie möglich, um die Lesbarkeit und Wartbarkeit Ihrer Stylesheets zu verbessern. Vermeiden Sie übermäßig komplexe oder lange Kombinationen, es sei denn, sie sind notwendig.
Beispiel: Selektoren einfach und spezifisch halten
/* Komplexe Selektoren vermeiden */
div.container p.highlight span.bold {
font-weight: bold;
}
/* Einfachere und spezifischere Selektoren bevorzugen */
.highlight .bold {
font-weight: bold;
}Der zweite Selektor ist einfacher und somit leichter zu verstehen und zu warten.