CSS Pseudo-Elemente und Selektoren

Pseudo-Elemente und fortgeschrittene Selektoren ermöglichen mächtige Styling-Möglichkeiten. Lernen Sie ::before, ::after, :nth-child und mehr.

Pseudo-Elemente vs. Pseudo-Klassen

::before und ::after

/* Grundlagen - content ist PFLICHT! */
.element::before {
    content: '';  /* Kann leer sein */
}

.element::after {
    content: 'Text hinzufügen';
}

/* Icon vor Link */
a[href^="https"]::before {
    content: '🔗 ';
}

/* Dekorative Elemente */
.quote::before {
    content: '"';
    font-size: 3em;
    color: #ccc;
    position: absolute;
    top: -10px;
    left: -20px;
}

/* Clearfix (klassisch) */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* Counter */
.list-item::before {
    counter-increment: item;
    content: counter(item) ". ";
}

/* Attribut-Wert anzeigen */
a::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
}

Praktische ::before/::after Beispiele

/* Hover-Underline Effekt */
.fancy-link {
    position: relative;
    text-decoration: none;
}

.fancy-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease;
}

.fancy-link:hover::after {
    width: 100%;
}

/* Tooltip */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: #333;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Badge/Label */
.new-item::after {
    content: 'NEU';
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 8px;
    background: #e53e3e;
    color: white;
    font-size: 10px;
    border-radius: 4px;
}

/* Overlay */
.card::before {
    content: '';
    position: absolute;
    inset: 0;  /* top, right, bottom, left = 0 */
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover::before {
    opacity: 1;
}

Andere Pseudo-Elemente

/* Erste Zeile */
p::first-line {
    font-weight: bold;
    text-transform: uppercase;
}

/* Erster Buchstabe */
p::first-letter {
    font-size: 3em;
    float: left;
    line-height: 1;
    margin-right: 10px;
}

/* Textauswahl */
::selection {
    background: #ff6b6b;
    color: white;
}

/* Placeholder in Inputs */
input::placeholder {
    color: #999;
    font-style: italic;
}

/* Marker bei Listen */
li::marker {
    color: blue;
    font-weight: bold;
}

/* Scrollbar (Webkit) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

Pseudo-Klassen - Zustände

/* Interaktive Zustände */
a:hover { }    /* Maus darüber */
a:active { }   /* Beim Klicken */
a:visited { }  /* Besucht */
a:focus { }    /* Fokussiert */
a:focus-visible { }  /* Nur bei Keyboard-Fokus */
a:focus-within { }   /* Kind hat Fokus */

/* Formular-Zustände */
input:enabled { }
input:disabled { }
input:checked { }
input:indeterminate { }
input:valid { }
input:invalid { }
input:required { }
input:optional { }
input:in-range { }
input:out-of-range { }
input:placeholder-shown { }
input:read-only { }
input:read-write { }

/* Beispiel: Validierung */
input:valid {
    border-color: green;
}

input:invalid:not(:placeholder-shown) {
    border-color: red;
}

Strukturelle Pseudo-Klassen

/* Position im Elternelement */
li:first-child { }      /* Erstes Kind */
li:last-child { }       /* Letztes Kind */
li:only-child { }       /* Einziges Kind */
li:nth-child(2) { }     /* Zweites Kind */
li:nth-child(odd) { }   /* Ungerade: 1, 3, 5, ... */
li:nth-child(even) { }  /* Gerade: 2, 4, 6, ... */
li:nth-child(3n) { }    /* Jedes dritte: 3, 6, 9, ... */
li:nth-child(3n+1) { }  /* 1, 4, 7, 10, ... */
li:nth-last-child(2) { } /* Zweites von hinten */

/* Nur Elemente des gleichen Typs */
p:first-of-type { }
p:last-of-type { }
p:nth-of-type(2) { }
p:only-of-type { }

/* Beispiel: Zebra-Stripes */
tr:nth-child(even) {
    background: #f5f5f5;
}

/* Beispiel: Grid-Layout */
.grid-item:nth-child(3n) {
    margin-right: 0;
}

Weitere nützliche Pseudo-Klassen

/* :not() - Negation */
li:not(:last-child) {
    border-bottom: 1px solid #eee;
}

button:not(:disabled) {
    cursor: pointer;
}

/* :is() und :where() - Gruppierung */
:is(h1, h2, h3):hover {
    color: blue;
}

/* :where() hat Spezifität 0 */
:where(h1, h2, h3) {
    margin-bottom: 1em;
}

/* :has() - Parent Selector (Modern) */
/* Artikel mit Bild stylen */
article:has(img) {
    display: grid;
    grid-template-columns: 200px 1fr;
}

/* Container mit leerem Input */
.form-group:has(input:placeholder-shown) {
    opacity: 0.7;
}

/* :empty - Leere Elemente */
.message:empty {
    display: none;
}

/* :target - URL-Fragment */
section:target {
    background: yellow;
}

/* :root - Dokumentwurzel */
:root {
    --primary-color: blue;
}

/* :lang() - Sprache */
:lang(de) {
    quotes: '„' '"';
}

Attribut-Selektoren

/* Hat Attribut */
[disabled] { }

/* Exakter Wert */
[type="text"] { }

/* Beginnt mit */
[href^="https"] { }

/* Endet mit */
[href$=".pdf"] { }

/* Enthält */
[class*="btn"] { }

/* Wort in Liste (space-separated) */
[class~="active"] { }

/* Beginnt mit oder ist (für lang-Attribut) */
[lang|="en"] { }  /* en, en-US, en-GB */

/* Case-insensitive */
[type="TEXT" i] { }

/* Praktische Beispiele */
a[href^="mailto"]::before {
    content: '✉️ ';
}

a[href$=".pdf"]::after {
    content: ' (PDF)';
    font-size: 0.8em;
}

a[href^="http"]:not([href*="meinedomain.de"]) {
    /* Externe Links */
}

input[type="checkbox"]:checked + label {
    text-decoration: line-through;
}

Kombinator-Selektoren

/* Nachfahre (irgendwo drin) */
article p { }

/* Direktes Kind */
article > p { }

/* Direkt folgendes Geschwister */
h2 + p { }

/* Alle folgenden Geschwister */
h2 ~ p { }

/* Beispiel: Abstände nach Headings */
h2 + p {
    margin-top: 0;
}

/* Alle p nach dem ersten */
p ~ p {
    margin-top: 1em;
}

Weitere Informationen

• 🎨 CSS Animationen
• 📦 CSS Flexbox
• 🎯 CSS Spezifität