CSS-Selektoren sind Muster, die auf HTML-Elemente angewendet werden, um sie zu stylen. Die grundlegenden Selektoren decken einfache und häufig verwendete Muster ab und bilden die Basis für das Styling einzelner oder mehrerer HTML-Elemente.
Typselektoren wählen HTML-Elemente basierend auf ihrem Tag-Namen aus. Sie ermöglichen das Anwenden eines einheitlichen Stils auf alle Elemente eines bestimmten Typs.
/* Alle <p>-Elemente auf der Seite */
p {
color: blue;
font-size: 16px;
}Klassenselektoren greifen auf Elemente mit einer bestimmten
CSS-Klasse zu. Sie beginnen mit einem Punkt (.) und gelten
für alle Elemente, die mit der entsprechenden Klasse versehen sind. Mit
Klassen kann man Elemente gruppieren und gezielt stylen, auch wenn sie
unterschiedliche Tags haben.
/* Alle Elemente mit der Klasse "highlight" */
.highlight {
background-color: yellow;
font-weight: bold;
}HTML-Beispiel:
<p class="highlight">Dies ist ein hervorgehobener Absatz.</p>
<span class="highlight">Dies ist ein hervorgehobenes Span-Element.</span>ID-Selektoren wählen Elemente anhand ihrer eindeutigen
id aus und beginnen mit einem #. Eine ID
sollte innerhalb eines Dokuments nur einmal verwendet werden, da sie
einzigartig ist. ID-Selektoren haben eine hohe Spezifität und sollten
gezielt eingesetzt werden, um bestimmte Elemente eindeutig zu
stylen.
/* Element mit der ID "header" */
#header {
background-color: #333;
color: white;
}HTML-Beispiel:
<div id="header">Dies ist der Header</div>Der Universalselektor (*) wählt alle Elemente auf der
Seite aus und wird verwendet, wenn ein Stil global angewendet werden
soll. Er ist nützlich für grundlegende Einstellungen, wie das
Zurücksetzen von Standard-Margins und -Padding.
/* Setzt alle Ränder und Abstände zurück */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Attributselektoren wählen Elemente basierend auf bestimmten Attributen oder Attributwerten aus. Diese Selektoren sind nützlich, um gezielt Elemente anzusprechen, die bestimmte HTML-Attribute enthalten.
/* Wählt alle Links, die mit "https://" beginnen */
a[href^="https://"] {
color: green;
text-decoration: underline;
}
/* Wählt alle Eingabefelder mit dem Attribut "type=text" */
input[type="text"] {
border: 1px solid #333;
padding: 5px;
}CSS erlaubt die Kombination mehrerer Selektoren, um gezielt bestimmte Elemente anzusprechen. Zum Beispiel:
Kombination von Typ- und Klassenselektoren:
/* Wählt nur <p>-Elemente mit der Klasse "highlight" */
p.highlight {
color: red;
font-style: italic;
}Mehrere Selektoren in einer Regel: Mit einem Komma lassen sich mehrere Selektoren kombinieren, um denselben Stil auf verschiedene Elemente anzuwenden.
/* Wendet den Stil auf alle <h1> und <h2>-Elemente an */
h1, h2 {
font-family: Arial, sans-serif;
color: #333;
}CSS-Kombinatoren und komplexe Selektoren bieten die Möglichkeit, gezielt Elemente auszuwählen, die in einer bestimmten Beziehung zu anderen Elementen stehen. Diese Selektoren ermöglichen fein abgestimmte Layouts und Designs, indem sie die Struktur des HTML-Dokuments berücksichtigen. Die vier Hauptkombinatoren sind der Nachfahrenselektor, der Kindselektor, der Nachbarselektor und der Geschwisterselektor.
Der Nachfahrenselektor () wählt alle Elemente aus, die
sich innerhalb eines anderen Elements befinden, unabhängig von der Tiefe
der Verschachtelung.
/* Wählt alle <span>-Elemente innerhalb eines <div> */
div span {
color: blue;
}HTML-Beispiel:
<div>
<p>Dies ist ein Absatz.</p>
<span>Dies ist ein blauer Text.</span>
</div>Hier werden alle <span>-Elemente innerhalb eines
<div> blau eingefärbt, auch wenn sie tiefer
verschachtelt sind.
>)Der Kindselektor (>) wählt nur die unmittelbaren
Kinder eines Elements aus, ignoriert jedoch weiter verschachtelte
Nachfahren.
/* Wählt nur direkte <p>-Kinder eines <div> */
div > p {
font-weight: bold;
}HTML-Beispiel:
<div>
<p>Dies ist ein direkter Kind-Absatz.</p>
<div>
<p>Dieser Absatz ist verschachtelt und wird nicht fett dargestellt.</p>
</div>
</div>In diesem Beispiel wird nur der erste <p>-Absatz
fett formatiert, da er ein direktes Kind von <div>
ist.
+)Der Nachbarselektor (+) wählt das erste Element aus, das
direkt auf ein anderes bestimmtes Element folgt. Dieser Selektor ist
nützlich, wenn Sie zwei aufeinanderfolgende Elemente unterschiedlich
gestalten möchten.
/* Wählt das erste <p>-Element direkt nach einer <h2>-Überschrift */
h2 + p {
margin-top: 0;
}HTML-Beispiel:
<h2>Überschrift</h2>
<p>Dieser Absatz wird ohne oberen Rand dargestellt.</p>
<p>Dieser Absatz hat den normalen Abstand.</p>Hier wird nur der erste <p>-Absatz nach der
<h2>-Überschrift ohne oberen Rand dargestellt.
~)Der Geschwisterselektor (~) wählt alle Elemente aus, die
auf ein anderes bestimmtes Element folgen und Geschwister desselben
übergeordneten Elements sind, ohne dabei direkt aufeinander folgen zu
müssen.
/* Wählt alle <p>-Elemente nach einem <h2> */
h2 ~ p {
color: gray;
}HTML-Beispiel:
<h2>Überschrift</h2>
<p>Dieser Absatz wird grau dargestellt.</p>
<p>Auch dieser Absatz wird grau dargestellt.</p>In diesem Fall werden alle <p>-Elemente, die nach
einer <h2>-Überschrift folgen, grau gefärbt,
unabhängig davon, ob sie direkt auf die
<h2>-Überschrift folgen.
Mit CSS lassen sich komplexe Selektoren erstellen, indem Kombinatoren kombiniert und selektiv angewendet werden.
/* Wählt alle <a>-Elemente innerhalb eines direkten <p>-Kindes eines <div> */
div > p a {
color: red;
}In diesem Beispiel werden nur Links (<a>)
innerhalb eines <p>-Elements, das wiederum ein
direktes Kind eines <div> ist, rot eingefärbt.
Attributselektoren bieten eine präzise Möglichkeit, HTML-Elemente basierend auf spezifischen Attributen und deren Werten auszuwählen. Sie erlauben das Ansprechen von Elementen, ohne zusätzliche Klassen oder IDs zu definieren, und sind besonders nützlich für das gezielte Styling von Elementen wie Formularfelder oder Links mit spezifischen URLs.
[attribute]: Wählt alle Elemente aus, die das angegebene Attribut enthalten, unabhängig von dessen Wert.
/* Wählt alle Elemente, die das Attribut "title" enthalten */
[title] {
color: blue;
}[attribute=“value”]: Wählt Elemente aus, bei denen das Attribut einen exakten Wert hat.
/* Wählt alle Links mit href="https://example.com" */
a[href="https://example.com"] {
color: green;
}[attribute~=“value”]: Wählt Elemente aus, bei denen der Attributwert eine durch Leerzeichen getrennte Liste von Wörtern enthält, die den angegebenen Wert einschließt. Diese Methode ist nützlich für das Arbeiten mit Attributen, die mehrere Werte enthalten.
/* Wählt alle Elemente, bei denen die Klasse "highlight" enthalten ist */
[class~="highlight"] {
background-color: yellow;
}[attribute|=“value”]: Wählt Elemente aus, bei
denen das Attribut genau dem Wert entspricht oder mit diesem beginnt,
gefolgt von einem Bindestrich. Nützlich zum Beispiel für
sprachspezifische Attribute wie lang.
/* Wählt alle Elemente mit "lang" auf "en" oder "en-US" */
[lang|="en"] {
font-style: italic;
}[attribute^=“value”]: Wählt Elemente aus, bei denen der Attributwert mit dem angegebenen Wert beginnt.
/* Wählt alle Links, deren href mit "https" beginnt */
a[href^="https"] {
color: blue;
text-decoration: underline;
}[attribute$=“value”]: Wählt Elemente aus, bei denen der Attributwert mit dem angegebenen Wert endet.
/* Wählt alle Bild-Elemente mit der Dateiendung ".jpg" */
img[src$=".jpg"] {
border: 1px solid #333;
}[attribute*=“value”]: Wählt Elemente aus, bei denen der Attributwert den angegebenen Wert irgendwo enthält.
/* Wählt alle Links, die das Wort "example" im href enthalten */
a[href*="example"] {
color: purple;
}Formularfelder: Attributselektoren lassen sich
gezielt für die Auswahl und das Styling bestimmter
input-Typen einsetzen.
input[type="text"] {
border: 1px solid #333;
padding: 5px;
}
input[type="submit"] {
background-color: #28a745;
color: white;
padding: 5px 10px;
border: none;
cursor: pointer;
}Externe und interne Links: Attributselektoren ermöglichen das gezielte Styling von Links zu externen oder internen Seiten.
a[href^="http"] {
color: blue; /* Externe Links */
}
a[href^="/"] {
color: orange; /* Interne Links */
}Bildformate und Dateiendungen: Durch das Ansprechen bestimmter Dateiendungen lässt sich das Erscheinungsbild von Bildern und anderen Medienelementen leicht anpassen.
img[src$=".png"] {
background-color: lightgrey;
}Pseudoklassen und Pseudo-Elemente erweitern CSS um die Möglichkeit, spezielle Zustände und Teile von HTML-Elementen anzusprechen, ohne dass zusätzliche Klassen oder IDs benötigt werden. Sie sind besonders nützlich für interaktive Elemente und feine Anpassungen im Layout.
Pseudoklassen werden durch einen Doppelpunkt (:)
eingeführt und beziehen sich auf einen bestimmten Zustand eines
Elements, wie z. B. beim Hover-Effekt eines Buttons oder dem ersten Kind
in einer Liste.
:hover – Wendet den Stil an, wenn der Benutzer mit der Maus über das Element fährt.
a:hover {
color: blue;
text-decoration: underline;
}:active – Wendet den Stil an, während das Element aktiv ist, z. B. während ein Link geklickt wird.
a:active {
color: red;
}:focus – Wendet den Stil an, wenn ein Element den Fokus hat, etwa wenn ein Eingabefeld ausgewählt wird.
input:focus {
border-color: blue;
}:first-child – Wählt das erste Kind eines übergeordneten Elements.
p:first-child {
font-weight: bold;
}:last-child – Wählt das letzte Kind eines übergeordneten Elements.
p:last-child {
font-style: italic;
}:nth-child(n) – Wählt Elemente basierend auf
ihrer Position innerhalb des Eltern-Elements. Das Muster kann durch
n angepasst werden.
li:nth-child(odd) {
background-color: #f0f0f0;
}:not(selector) – Wendet den Stil auf alle Elemente an, die nicht dem Selektor entsprechen.
p:not(.highlight) {
color: gray;
}Pseudoklassen bieten eine flexible Möglichkeit, interaktive und bedingte Stile basierend auf den Zuständen der Elemente anzuwenden.
Pseudo-Elemente ermöglichen das gezielte Styling bestimmter Teile
eines Elements, wie des ersten Buchstabens oder des letzten Inhalts. Sie
werden durch zwei Doppelpunkte (::) gekennzeichnet, obwohl
in CSS2 auch die Schreibweise mit einem Doppelpunkt (:)
noch unterstützt wird.
::before – Fügt Inhalt vor dem eigentlichen
Inhalt des Elements hinzu. Oft in Kombination mit der
content-Eigenschaft.
h1::before {
content: "👉 ";
color: orange;
}::after – Fügt Inhalt nach dem Inhalt des Elements hinzu.
p::after {
content: " ✨";
color: gold;
}::first-line – Wendet den Stil nur auf die erste Zeile des Elements an. Wird häufig für Textelemente verwendet.
p::first-line {
font-weight: bold;
color: blue;
}::first-letter – Wendet den Stil nur auf den ersten Buchstaben des Textes im Element an.
p::first-letter {
font-size: 2em;
color: red;
}::selection – Ermöglicht das Styling des hervorgehobenen Texts, wenn er durch den Benutzer markiert wird.
::selection {
background-color: yellow;
color: black;
}Interaktive Buttons: Pseudoklassen wie
:hover, :focus und :active
ermöglichen das Styling von Buttons oder Links für verschiedene
Interaktionszustände.
button:hover {
background-color: #007bff;
color: white;
}Gestaltung von Textteilen: Pseudo-Elemente wie
::first-letter oder ::first-line sind
nützlich, um typografische Effekte für den Text einzufügen, ohne das
HTML zu ändern.
p::first-letter {
font-size: 3em;
color: #333;
}Zusätzliche Inhalte und Symbole: Mit
::before und ::after lassen sich dekorative
Symbole oder zusätzliche Inhalte hinzufügen.
li::before {
content: "• ";
color: #888;
}Spezifität und Kaskadierung sind fundamentale Konzepte in CSS, die bestimmen, welche Regeln angewendet werden, wenn mehrere Selektoren auf dasselbe Element zielen. Ein Verständnis der Spezifität und Kaskadierung ist entscheidend, um vorhersehbare und kontrollierte Styles zu erzielen.
Spezifität ist eine Gewichtung, die CSS-Selektoren basierend auf ihrem Typ zugeordnet wird. Sie entscheidet, welche Regel gilt, wenn mehrere Selektoren auf dasselbe Element zutreffen. Die Gewichtung basiert auf den Typen der Selektoren:
style="color: red;" direkt im HTML-Tag).#header)..box,
[type="text"], :hover).p, ::before).Spezifität wird wie ein vierstelliges Zahlensystem betrachtet (z. B.
0,0,1,0). Die Positionen entsprechen:
Beispiel:
/* Spezifität: 0,0,1,0 */
.box {
color: blue;
}
/* Spezifität: 0,1,0,0 */
#header {
color: red;
}
/* Spezifität: 1,0,0,0 (höher als die beiden vorherigen Selektoren) */
style="color: green;"Angenommen, wir haben die folgenden Regeln für ein Element:
div { color: blue; } /* Spezifität: 0,0,0,1 */
.box { color: red; } /* Spezifität: 0,0,1,0 */
#header { color: green; } /* Spezifität: 0,1,0,0 */Das <div>-Element mit der Klasse .box
und der ID #header würde die grüne Farbe erhalten, da die
Regel mit der höchsten Spezifität gewinnt (#header).
Kombinierte Selektoren erhöhen die Spezifität. Zum Beispiel:
div.box { color: blue; } /* Spezifität: 0,0,1,1 */
div .box:hover { color: red; } /* Spezifität: 0,0,2,1 */Die Kaskadierung beschreibt, wie CSS die Reihenfolge und Priorität von Regeln behandelt, die auf dasselbe Element zielen. Die Reihenfolge folgt drei grundlegenden Prinzipien:
p {
color: black;
}
p {
color: blue;
}Da beide Regeln dieselbe Spezifität haben, wird
color: blue; angewendet, da es später definiert wurde.
!important-DeklarationDie !important-Deklaration überschreibt alle anderen
Regeln und Spezifitäten. Sie sollte jedoch sparsam verwendet werden, da
sie die Kaskade stört und den Code schwer wartbar macht.
p {
color: blue !important;
}
p {
color: red;
}Hier wird der Text in Blau angezeigt, da !important
Vorrang hat.