CSS Nesting

CSS Nesting erlaubt es dir, CSS-Regeln verschachtelt zu schreiben – ähnlich wie du es vielleicht aus SCSS/Sass kennst, aber nativ in CSS.

Statt wiederholt lange Selektoren auszuschreiben, kannst du Regeln logisch ineinander legen. Das macht Styles:

• besser lesbar
• leichter wartbar
• strukturierter

---

Grundidee

CSS (ohne Nesting)

.card {
padding: 1rem;
}

.card h2 {
font-size: 1.5rem;
}

.card p {
color: #555;
}

CSS Nesting

.card {
    padding: 1rem;
    h2 {
    font-size: 1.5rem;
    }
    p {
    color: #555;
    }
}

Prinzip

Alles, was innen steht, wird automatisch mit dem äusseren Selektor kombiniert.

.parent {
    color: black;

    .child {
    color: red;
    }
}

-> Entspricht

.parent .child {
color: red;
}

---

Der &-Operator

Das & steht für den aktuellen Selektor.

button {
    background: blue;

    &:hover {
    background: darkblue;
    }
}

-> Wird zu

button:hover { ... }

---

Modifier

.button {
    padding: 1rem;

    &--primary {
    background: blue;
    }
}

Wird zu .button--primary

---

Kombinationen

.card {
    &.active {
    border: 2px solid green;
    }
}

Wird zu .card.active

---

Nesting & Kombinatoren

Direkte Kinder >

ul {
    > li {
    list-style: none;
    }
}

Geschwister +, ~

h2 {
    + p {
    margin-top: 0;
    }
}

---

Nesting mit Media Queries

.card {
    padding: 1rem;

    @media (min-width: 768px) {
        padding: 2rem;
    }
}

-> Bezieht sich nur auf .card.

---

Browser-Support

CSS Nesting ist modernes CSS.
Unterstützt in aktuellen Versionen von:
Chrome, Edge, Safari, Firefox (neuere Versionen)

---

Vertiefe dein Wissen mit einer Übung

---