In der heutigen digitalen Welt ist CSS (Cascading Style Sheets) das zentrale Werkzeug, um Webseiten sowohl optisch ansprechend als auch funktional zu gestalten. Hinter jedem gelungenen Layout steckt ein präzises Regelwerk, das definiert, wie einzelne HTML-Elemente gestylt werden.
CSS-Selektoren ermöglichen es, gezielt Elemente anhand ihres Typs, ihrer Klasse, ID oder ihres Zustands – etwa beim Hover oder Klick – anzusprechen.
In diesem Leitfaden tauchen wir tief in die Welt der Selektoren ein. Egal, ob du gerade mit Webentwicklung beginnst oder bereits Erfahrung hast – hier findest du klare Erklärungen und praxisnahe Beispiele: von einfachen Element-Selektoren bis hin zu komplexen Kombinationen und Pseudo-Klassen.
Erfahre, wie du mit präzisem CSS das Layout und die Interaktivität deiner Website auf das nächste Level bringst.
Beschreibung:
Wählt alle Instanzen eines bestimmten HTML-Tags aus.
Beispiel: Alle <p>-Elemente werden blau dargestellt.
HTML:
<!-- All <p> elements are selected -->
<p>This is a paragraph.</p>CSS:
p {
color: blue;
}
Beschreibung:
Zielt auf Elemente mit einem bestimmten Klassenattribut.
HTML:
<!-- The element with the class "example" is highlighted -->
<div class="example">Example text</div>CSS:
.example {
background-color: yellow;
}
Beschreibung:
Wählt ein einzelnes Element anhand seiner eindeutigen ID aus (IDs sollten pro Seite einzigartig sein).
HTML:
<!-- The element with the ID "header" is selected -->
<header id="header">My Website</header>CSS:
#header {
font-size: 24px;
}
Beschreibung:
Wählt Elemente aus, die sich innerhalb eines bestimmten Elternelements befinden – unabhängig von der Tiefe der Verschachtelung.
HTML:
<!-- The <p> tag inside the element with the class "container" is targeted -->
<div class="container">
<p>Paragraph inside container.</p>
</div>CSS:
.container p {
color: green;
}
Beschreibung:
Zielt nur auf direkte Kind-Elemente eines Elternteils.
HTML:
<div class="container">
<!-- This <p> is a direct child -->
<p>Direct child</p>
<div>
<!-- This <p> is not a direct child -->
<p>Not a direct child</p>
</div>
</div>CSS:
.container > p {
font-weight: bold;
}
Beschreibung:
Wählt das unmittelbar auf ein bestimmtes Element folgende Element aus.
HTML:
<h1>Heading</h1>
<!-- This <p> immediately follows the <h1> -->
<p>First paragraph after heading</p>
<p>Second paragraph</p>CSS:
h1 + p {
margin-top: 0;
}
Beschreibung:
Wählt alle Geschwisterelemente aus, die nach einem bestimmten Element folgen.
HTML:
<h1>Heading</h1>
<!-- All following <p> elements that are siblings of the <h1> are selected -->
<p>First paragraph</p>
<p>Second paragraph</p>CSS:
h1 ~ p {
line-height: 1.5;
}
Beschreibung:
Zielt auf Elemente basierend auf dem Vorhandensein oder Wert eines Attributs.
HTML:
<!-- Only the <input> with type="text" is targeted -->
<input type="text" placeholder="Enter text here...">
<input type="password" placeholder="Password">CSS:
input[type="text"] {
border: 1px solid #000;
}
Beschreibung:
Wendet Styles an, wenn der Benutzer mit der Maus über ein Element fährt.
HTML:
<!-- The link is highlighted on hover -->
<a href="#">Link</a>CSS:
a:hover {
color: red;
}
Beschreibung:
Wird angewendet, während ein Element aktiviert wird (z. B. beim Klicken).
HTML:
<!-- The button is styled while it is active (being clicked) -->
<button>Click me</button>CSS:
button:active {
background-color: #ccc;
}
Beschreibung:
Markiert Elemente, die im Fokus stehen – z. B. durch Klick oder Tastaturnavigation.
HTML:
<!-- The <input> field is highlighted when it receives focus -->
<input type="text">CSS:
input:focus {
outline: 2px solid blue;
}
Beschreibung:
Ermöglicht das Auswählen bestimmter Kinder basierend auf ihrer Position im Eltern-Element.
HTML:
<!-- The second <li> in the list is selected -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>CSS:
ul li:nth-child(2) {
font-weight: bold;
}
Beschreibung:
Fügen Inhalt vor oder nach dem eigentlichen Elementinhalt ein – ohne das HTML zu verändern.
HTML:
<!-- The element with the class "box" is enhanced with extra content -->
<div class="box">Content</div>CSS:
.box::before {
content: "Start - ";
}
.box::after {
content: " - End";
}
Beschreibung:
Fasst mehrere Selektoren zusammen, um denselben Stil auf mehrere Elemente anzuwenden.
HTML:
<!-- All headings (<h1>, <h2>, <h3>) are selected -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>CSS:
h1, h2, h3 {
margin-bottom: 10px;
}
Beschreibung:
Wählt alle Elemente auf der Seite aus – ideal für globale Einstellungen.
HTML:
<!-- Every HTML element on the page is targeted -->
<div>Div</div>
<p>Paragraph</p>
<span>Span</span>CSS:
* {
box-sizing: border-box;
}
Beschreibung:
Kombiniert mehrere Selektoren, um spezifische Regeln zu definieren.
HTML:
<!-- List items within a menu that change on hover -->
<ul class="menu">
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Contact</li>
</ul>CSS:
.menu .item:hover {
background-color: #f0f0f0;
}
Beschreibung:
Wendet Styles auf bereits besuchte Links an.
HTML:
<!-- The link changes appearance after it has been visited -->
<a href="https://example.com">Example</a>CSS:
a:visited {
color: purple;
}
Beschreibung:
Wählen das erste oder letzte Kind eines Elements aus.
HTML:
<ul>
<!-- First <li> element -->
<li>First Element</li>
<li>Second Element</li>
<!-- Last <li> element -->
<li>Third Element</li>
</ul>
CSS:
ul li:first-child {
font-style: italic;
}
ul li:last-child {
font-style: oblique;
}
Beschreibung:
Wählt Elemente aus, deren Attributwerte mit einer bestimmten Zeichenfolge beginnen.
HTML:
<!-- All elements whose class starts with "icon-" -->
<div class="icon-home"></div>
<div class="icon-user"></div>CSS:
[class^="icon-"] {
width: 24px;
height: 24px;
}
Beschreibung:
Wendet Styles auf aktivierte Checkboxen oder Radiobuttons an.
HTML:
<input type="checkbox" id="check1">
<label for="check1">Option</label>CSS:
input:checked + label {
color: green;
}
Beschreibung:
Zeigt deaktivierte Formularfelder visuell abgeschwächt an.
HTML:
<!-- A disabled input field -->
<input type="text" disabled>CSS:
input:disabled {
background-color: #eee;
}
Das Verständnis von CSS-Selektoren ist die Grundlage für effektives Styling. Ob einfache Tag-Selektoren oder komplexe Kombinationen mit Pseudo-Klassen – sie geben dir volle Kontrolle über das Erscheinungsbild und Verhalten deiner Website.
Durch präzise Selektoren kannst du dein Design vereinfachen, Code reduzieren und Benutzerinteraktionen gezielt steuern. Experimentiere mit den gezeigten Beispielen und entwickle dein eigenes, sauberes und skalierbares CSS-System.
UNHYDE ist eine Webentwicklungsagentur aus München, spezialisiert auf High-Performance-Webdesign, UX-Strategien und digitale Markenentwicklung. Als Shopify Partner Agentur realisieren wir performante, maßgeschneiderte Weblösungen für internationale Marken.
Unser Ziel: funktionales Design, starke Performance und nachhaltiges Wachstum durch durchdachte Webentwicklung.
Kostenloses Erstgespräch
Jetzt Kontaktieren