CSS & Styling

Wat is Cascade, Specificity en Inheritance in CSS?

Deze drie principes bepalen welke CSS-regels worden toegepast op elementen.

Home/Categorieën/CSS & Styling/Wat is Cascade, Specificity en Inheritance in CSS?

Cascade (watervalling)

CSS staat voor Cascading Style Sheets. 'Cascade' betekent dat CSS-regels van boven naar beneden worden gelezen. De laatste regel wint wanneer twee regels met gelijke specificiteit conflicteren.

Specificity (specificiteit)

Specificity bepaalt welke selector prioriteit heeft: Tag selectors (1 punt): div, p Class/attribute selectors (10 punten): .button, [type] ID selectors (100 punten): #main Inline styles (1000 punten): style= !important (10000 punten) - vermijd dit Hoe hoger de specificity, hoe sterker de regel.

Inheritance

Sommige CSS-eigenschappen erven over van parent naar child elementen. Font-family, color, line-height erven over. Width, padding, margin erven NIET over.

Code Voorbeelden

CSSSpecificity voorbeeld
/* Tag selector - 1 punt */
div { color: blue; }

/* Class selector - 10 punten (wint van tag) */
.container { color: red; }

/* ID selector - 100 punten (wint van class) */
#main { color: green; }

/* Inline style - 1000 punten (wint van ID) */
/* <div id="main" style="color: yellow;"> */

/* !important - 10000 punten (wint van alles) - VERMIJD */
p { color: black !important; }
CSSInheritance voorbeeld
body {
  font-family: Arial;  /* ERFT OVER naar alle elementen */
  color: #333;         /* ERFT OVER */
}

.container {
  width: 500px;   /* ERFT NIET OVER */
  padding: 20px;  /* ERFT NIET OVER */
  color: red;     /* OVERSCHRIJFT body color */
}

💡 Praktijk Tips

Houd specificity laag door meer generieke selectors te gebruiken. Vermijd ID selectors waar mogelijk. !important is een code smell - teken dat iets niet klopt.

Relevante trefwoorden

cascadespecificityinheritanceCSS
← Terug naar CSS & StylingAlle categorieën →