Wat betekent de term 'cascade' in CSS?

De cascade in CSS bepaalt welke van de conflicterende stijlen op een element moet worden toegepast. Het is gebaseerd op drie hoofdcriteria:

1. Belang: Stijlen met !important hebben de hoogste prioriteit.
2. Specificiteit: Meer specifieke selectors overschrijven minder specifieke. De specificiteit wordt berekend op basis van het aantal ID's, klassen/pseudo-klassen/attributenselectors en tags/pseudo-elementen in de selector.
3. Volgorde in de broncode: Bij gelijke belangrijkheid en specificiteit wordt de laatst gedeclareerde regel toegepast.

Daarnaast worden ook andere factoren in overweging genomen:

• Stijlbron: Gebruikersstijlen (in de browserinstellingen), auteursstijlen (externe en interne stijlen, inline stijlen), standaardbrowserstijlen.
• Erfelijkheid: Sommige eigenschappen worden geërfd van ouder-elementen naar kinderen.

Voorbeeld van specificiteit:

/* Specificiteit: 0-1-0 */
.mijn-klasse {
  kleur: blauw;
}

/* Specificiteit: 1-0-0 */
#mijn-id {
  kleur: rood;
}

In dit geval krijgt het element met id mijn-id en klasse mijn-klasse de tekstkleur rood, omdat de ID #mijn-id een hogere specificiteit heeft dan .mijn-klasse.