In der heutigen digitalen Welt ist CSS (Cascading Style Sheets) der Schlüssel zur Erstellung optisch ansprechender und funktionaler Websites. Unter jedem gut ausgearbeiteten Layout befinden sich präzise Anweisungen, mit denen Sie bestimmte Elemente auf Ihrer Seite gestalten können. Mithilfe von CSS-Selektoren können Sie HTML-Elemente anhand ihres Typs, ihrer Klasse, ihrer ID oder sogar bestimmter Zustände wie Hover und Aktiv als Ziel auswählen.
In diesem Blogbeitrag tauchen wir tief in die faszinierende Welt der CSS-Selektoren ein. Egal, ob Sie neu in der Webentwicklung sind oder über jahrelange Erfahrung verfügen, dieser Leitfaden bietet einen klaren Überblick und praktische Beispiele — von grundlegenden Element-Selektoren bis hin zu komplexen Kombinationen und Pseudoklassen. Erfahren Sie, wie Sie die Struktur Ihrer Website kontrollieren und das Nutzererlebnis mithilfe einer Vielzahl von Selektoren verbessern können. All dies wird anhand von HTML- und CSS-Beispielcodes demonstriert.
Beschreibung:
Wählt alle Instanzen eines bestimmten HTML-Tags aus.
Beispiel: Alle <p> Elemente.
HTML:
<!-- All <p> elements are selected -->
<p>This is a paragraph.</p>CSS:
p {
color: blue;
}
Beschreibung:
Zielt auf Elemente basierend auf ihrem Klassenattribut ab.
Beispiel: Ein Element mit der Klasse Beispiel.
HTML:
<!-- The element with the class "example" is highlighted -->
<div class="example">Example text</div>CSS:
.example {
background-color: yellow;
}
Beschreibung:
Zielt auf ein einzelnes Element mit seiner eindeutigen ID ab (IDs sollten innerhalb der Seite eindeutig sein).
Beispiel: Das Element mit der ID Kopfzeile.
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 in einem übergeordneten Element verschachtelt sind, unabhängig von der Tiefe.
Beispiel: A <p> Element innerhalb eines Elements mit der Klasse Container.
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 die unmittelbaren (direkten) Kinder eines übergeordneten Elements ab.
Beispiel: A <p> das ist ein direktes Kind von . Behälter.
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 Element aus, das unmittelbar auf ein bestimmtes Element folgt.
Beispiel: Das erste <p> das folgt direkt einem <h1>.
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 gleichgeordneten Elemente aus, die auf ein bestimmtes Element folgen.
Beispiel: Alle <p> Elemente, die Geschwister eines sind <h1>.
HTML: X
<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 ab, die auf dem Vorhandensein oder Wert eines Attributs basieren.
Beispiel: Alle <input> Elemente mit type= „Text“.
HTML: PPP
<!-- 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 Stile an, wenn der Benutzer die Maus über ein Element bewegt.
Beispiel: Ein Link ändert seine Farbe, wenn der Mauszeiger darüber bewegt wird.
HTML:
<!-- The link is highlighted on hover -->
<a href="#">Link</a>CSS:
a:hover {
color: red;
}
Beschreibung:
Wendet Stile an, während ein Element aktiviert wird (z. B. angeklickt).
Beispiel: Eine Taste zeigt eine andere Hintergrundfarbe, wenn sie gedrückt wird.
HTML:
<!-- The button is styled while it is active (being clicked) -->
<button>Click me</button>CSS:
button:active {
background-color: #ccc;
}
Beschreibung:
Wendet Stile an, wenn ein Element den Fokus erhält, z. B. durch Klicken oder Tabulatorfahren.
Beispiel: Ein <input> Das Feld wird hervorgehoben, wenn es fokussiert ist.
HTML:
<!-- The <input> field is highlighted when it receives focus -->
<input type="text">CSS:
input:focus {
outline: 2px solid blue;
}
Beschreibung:
Ermöglicht es Ihnen, ein oder mehrere untergeordnete Elemente eines übergeordneten Elements anhand ihrer Position auszuwählen.
Beispiel: Das zweite <li> in einer Liste.
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 Sie Inhalt vor oder nach dem Inhalt eines Elements ein, ohne den HTML-Code zu ändern.
Beispiel: Text vor und nach einem Element mit der Klasse anzeigen Kiste.
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:
Kombiniert mehrere Selektoren, um allen die gleichen Stile zuzuweisen.
Beispiel: Wenden Sie den gleichen Rand an auf <h1>, <h2>, und <h3> Elemente.
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 jedes Element auf der Seite aus, das häufig zum Anwenden globaler Stile verwendet wird.
Beispiel: Stellen Sie eine einheitliche Boxgröße für alle Elemente ein.
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 spezifischere Regeln zu erstellen.
Beispiel: Listet Elemente in einem Menü auf, deren Aussehen sich ändert, wenn Sie den Mauszeiger bewegen.
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 Stile auf Links an, die bereits vom Benutzer besucht wurden.
Beispiel: Ein Link ändert seine Farbe, nachdem er angeklickt wurde.
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 Sie das erste oder letzte untergeordnete Element innerhalb eines übergeordneten Elements aus.
Beispiel: Das erste und das letzte Listenelement erhalten ein spezielles Styling.
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:
Zielt auf Elemente ab, deren Attributwerte mit einer bestimmten Zeichenfolge beginnen.
Beispiel: Alle Elemente, deren Klassenname beginnt mit Symbol-.
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 Stile auf markierte Formularelemente an, wie z. B. Kontrollkästchen oder Optionsfelder.
Beispiel: Ein Etikett ändert seine Farbe, wenn das zugehörige Kontrollkästchen aktiviert ist.
HTML:
<input type="checkbox" id="check1">
<label for="check1">Option</label>CSS:
input:checked + label {
color: green;
}
Beschreibung:
Wendet Stile auf deaktivierte Formularelemente an, um deren Zustand visuell anzuzeigen.
Beispiel: Ein deaktiviertes Eingabefeld erscheint mit einem anderen Hintergrund.
HTML:
<!-- A disabled input field -->
<input type="text" disabled>CSS:
input:disabled {
background-color: #eee;
}
Wenn Sie diese CSS-Selektoren verstehen und verwenden, können Sie fein abgestimmte und interaktive Webdesigns erstellen. Dieser Leitfaden hat Ihnen gezeigt, wie Sie Elemente präzise ausrichten können — sei es nach Tag, Klasse, ID oder Status —, um Ihre Webprojekte auf die nächste Ebene zu bringen. Experimentieren Sie mit diesen Selektoren in Ihren eigenen Projekten und beobachten Sie, wie sich Ihre Websites mit verbesserter Struktur und dynamischen Effekten verändern.
Für weitere Einblicke oder wenn Sie bereit sind, Ihre Website auf das nächste Level zu heben, wenden Sie sich bitte an wenden Sie sich an uns bei UNHYDE®, der Webdesign-Agentur. Wir sind immer hier, um zusammenzuarbeiten und maßgeschneiderte Lösungen zu entwickeln, die Ihren individuellen Bedürfnissen entsprechen.
kostenloses erstgespräch
NEHMEN SIE KONTAKT AUF