Hoofdstuk 6

CSS Gevorderd

Duur: 3 lessen • Flexbox, Selectors en Specificiteit

🎯 Overzicht van de Sessie

  • CSS Layout met Flexbox
  • Pseudo-classes en pseudo-elementen
  • Geavanceerde typografie
  • CSS specificiteit
  • Selectors combineren

🚀 Leerdoelen

Aan het einde van dit hoofdstuk kun je:

  1. CSS Flexbox gebruiken voor lay-outs
  2. Pseudo-classes toepassen voor interactieve staten
  3. Pseudo-elementen gebruiken voor het stylen van delen van elementen
  4. CSS specificiteit begrijpen
  5. Selectors combineren en nesten

Deel 1: CSS Flexbox Layout

Wat is Flexbox?

Flexbox (Flexible Box Layout) maakt het eenvoudig om elementen binnen een container uit te lijnen en te verdelen, zelfs wanneer hun grootte onbekend of dynamisch is.

.container {
    display: flex;
}

Flex Direction

.container {
    flex-direction: row;      /* Standaard: links naar rechts */
    flex-direction: column;   /* Boven naar beneden */
}

Uitlijningseigenschappen

  • justify-content: Lijnt items uit langs de hoofdas (horizontaal als standaard).
  • align-items: Lijnt items uit langs de dwarsas (verticaal als standaard).
.container {
    display: flex;
    justify-content: center; /* Horizontaal centreren */
    align-items: center;     /* Verticaal centreren */
}

Deel 2: Pseudo-Classes

Pseudo-classes stylen elementen op basis van hun staat (zoals eroverheen zweven) of positie (zoals het eerste item zijn).

Interactieve Staten

a:hover {
    color: red;
    text-decoration: underline;
}

input:focus {
    border-color: blue;
}

Positionele Selectors

li:first-child { color: green; }
li:last-child { color: red; }
li:nth-child(even) { background: #eee; }

Deel 3: Pseudo-Elementen

Pseudo-elementen stylen specifieke delen van een element.

h1::before {
    content: "🚀 ";
}

p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

Deel 4: CSS Specificiteit

Specificiteit bepaalt welke CSS-regel "wint" wanneer meerdere regels op hetzelfde element van toepassing zijn.

De Hiërarchie
  1. Inline stijlen (Hoogste)
  2. IDs (#header)
  3. Classes / Attributen / Pseudo-classes (.btn)
  4. Elementen (p, h1) (Laagste)
⚠️ !important

De !important regel overschrijft alle specificiteit. Gebruik dit zeer spaarzaam, omdat het debuggen bemoeilijkt!

Deel 5: Selectors Combineren

Afstammeling

article p
Alle paragrafen binnen een artikel.

Direct Kind

div > p
Alleen paragrafen die directe kinderen zijn.

Aangrenzende Broer

h2 + p
De paragraaf direct volgend op een h2.

Deel 6: Woordenschat

TermDefinitie
Flex ContainerOuder-element met display: flex
HoofdasPrimaire as voor flex-uitlijning
Pseudo-classSelector op basis van staat (bijv. :hover)
Pseudo-elementSelector op basis van deel (bijv. ::after)
SpecificiteitPrioriteitsrangschikking van CSS-selectors

🏋️ Praktijkoefeningen

Daag jezelf uit met deze gevorderde CSS-taken:

Oefening 1: De Flexbox Hero

Bouw een hero-sectie. Vereisten:

  • Maak een container met een hoogte van 300px en een achtergrondafbeelding of -kleur
  • Gebruik display: flex om een titel en een knop zowel horizontaal als verticaal te centreren
  • Zorg ervoor dat de items verticaal gestapeld zijn met flex-direction: column

Oefening 2: De Interactieve Knoppenset

Maak een moderne knoppengroep. Vereisten:

  • Stijl de standaardstaat met een rand en padding
  • Gebruik de :hover pseudo-class om de achtergrond en cursor te veranderen
  • Gebruik de :active pseudo-class om de knop er "ingedrukt" uit te laten zien (bijv. transform: scale(0.95))
  • Gebruik :focus om een duidelijke outline toe te voegen voor toegankelijkheid

Oefening 3: De Gestreepte Lijst met Highlighting

Stijl een datatabel of lijst. Vereisten:

  • Maak een lijst van 6 items
  • Gebruik :nth-child(even) om elk tweede item een lichtgrijze achtergrond te geven
  • Gebruik een hover-selector (li:hover) om de achtergrond van een rij te veranderen wanneer de muis eroverheen gaat

Oefening 4: De Navigatiebalk met Iconen

Verbeter een navigatiemenu. Vereisten:

  • Maak een horizontale nav met vier links
  • Gebruik het ::before pseudo-element om een klein gekleurd vierkantje of stipje voor elke linktekst toe te voegen
  • Zorg voor voldoende margin tussen het "icoon" en de tekst

Oefening 5: De Specificiteitspuzzel

Los een conflict op. Vereisten:

  • Maak een div met id="main-box" en class="content-box"
  • Schrijf drie CSS-regels die de background-color instellen: één voor de tag (div), één voor de class en één voor het ID
  • Voeg !important toe aan de tag-selector regel en zie wat er gebeurt
  • Leg uit welke regel "wint" en waarom

Ga Verder met Leren

← Vorige: CSS Basis Volgende: CSS Geavanceerd →