CSS Nesting – Übung

Aufgabe

Gegeben ist folgendes HTML:

<div class="card">
<h2 class="card__title">Titel</h2>
<p class="card__text">Text</p>
<button class="card__button">Klick</button>
</div>

Schreibe CSS mit Nesting, sodass:

CSS Nesting ist modernes CSS.

1. .card einen Rahmen und Padding hat
2. Der Titel grösser ist
3. Der Text grau ist
4. Der Button:
   – blau ist
   - bei :hover dunkler wird
5. Auf Screens ab 600px bekommt die Card mehr Padding

Bonus

• Nutze & für Modifier (.card--highlight)
• Vermeide mehr als 2 Ebenen Nesting

---

Lösung

.card {
    padding: 1rem;
    border: 1px solid #ccc;

    &__title {
    font-size: 1.5rem;
    }

    &__text {
    color: #666;
    }

    &__button {
    background: blue;
    color: white;

        &:hover {
        background: darkblue;
        }
    }

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

Nesting Lektion

---