Selectors en de cascade

CSS (Cascading Style Sheets) is de taal die de visuele weergave bepaalt. Je schrijft regels: elke regel heeft een selector die elementen selecteert en een declaratieblok met eigenschap-waardeparen.

De drie fundamentele selectors: type selecteert alle elementen met een bepaalde tag (p), klasse selecteert elementen met een klasse (.card) en ID selecteert één element op basis van zijn id (#logo). Gebruik bij voorkeur klassen: ID's hebben een zeer hoge specificiteit.

Selecteer op attribuutwaarde met [type="email"]. Gebruik pseudoklassen voor een status: :hover, :focus, :active, :checked, :nth-child(), :first-child, :last-child.

Combinatoren beschrijven relaties tussen elementen: spatie (afstammeling), > (direct kind), + (aangrenzende broer of zus), ~ (algemene broer of zus).

Wanneer meerdere regels hetzelfde element selecteren, bepaalt de specificiteit welke regel wint. ID-selectors (0,1,0,0) verslaan klasse-selectors (0,0,1,0), die op hun beurt type-selectors (0,0,0,1) verslaan. Inline-stijlen verslaan alles. !important verslaat alles — gebruik het alleen als laatste redmiddel.

Tel ID's, klassen/attributen/pseudoklassen en typen afzonderlijk. Vergelijk de kolommen van links naar rechts. Voorbeeld: #nav .link:hover = (0,1,1,1). .nav a = (0,0,1,1). De eerste wint.

Wanneer de specificiteit gelijk is, wint de regel die later in het stijlblad staat. Dit is de C in CSS: de cascade. Zowel de importvolgorde als de bronvolgorde zijn belangrijk.

Sommige CSS-eigenschappen worden standaard overgeërfd: kinderen krijgen de waarde van hun ouder zonder dat je die zelf instelt. Tekstgerelateerde eigenschappen zoals color, font-family en line-height worden overgeërfd. Eigenschappen van het boxmodel, zoals margin, niet.

Met :is() en :where() schrijf je beknopte selectors die overeenkomen met een item uit een lijst. Het verschil: :is() neemt de hoogste specificiteit van zijn argumenten over; :where() heeft altijd specificiteit nul.

De universele selector * komt overeen met elk element. Deze wordt vaak gebruikt in CSS-resets: *, *::before, *::after { box-sizing: border-box; }. Daardoor is het boxmodel veel voorspelbaarder.

Browsers passen hun eigen standaardstijlblad (het stijlblad van de user-agent) toe voordat dat van jou wordt toegepast. CSS-resets, zoals normalize.css, of CSS-lagen maken deze standaardwaarden ongedaan, zodat je styling vanuit een bekende basis begint.

Selecteer elementen met type-, klasse-, ID-, attribuut- en pseudoklasse-selectors. Specificiteit lost conflicten op (ID's > klassen > typen). De cascade verbreekt gelijke standen met de bronvolgorde. Overerving geeft tekststijlen automatisch door aan nakomelingen.