Type - CSS-trucs | CSS Almanac 2025

Een Type Selector (ook wel Element Type Selector genoemd) koppelt elementen aan de corresponderende elementknooppuntnaam, zoals

, en tags. Type selectors worden over het algemeen gebruikt om "brede lijnen" wijzigingen aan te brengen in de stijl van een site.

p ( /* "p" is the type selector */ margin: 0 0 1em 0; )

Normaal gebruik

Vaak worden Type Selectors ingesteld als standaardinstellingen, zoals bij een CSS-reset waarbij het de bedoeling is om de standaardinstellingen van de browser te overschrijven. Een voorbeeld uit de eerste regel van normalize.css, een populaire CSS-reset:

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )

De Type Selectors hierboven stellen de weergave-eigenschap van die tags in om te blokkeren, zodat elke keer dat een van die tags op de site wordt gebruikt, ze als blok worden weergegeven, tenzij ze worden overschreven door een meer specifieke stijl.

Beste praktijken

Het wordt over het algemeen als een slechte gewoonte beschouwd om fijne detailwijzigingen toe te passen met alleen een Type Selector. Het toepassen van een "kleur: wit" -eigenschap algemeen op alle tags zou bijvoorbeeld zelden iets nuttigs zijn op een site. Dit komt doordat tags algemeen zijn en voor verschillende doeleinden op sites worden gebruikt.

Echter, met een Type Selector zoals body ( ), het instellen van een standaard font-size en line-heightis gebruikelijk. Dit is gedeeltelijk te wijten aan het feit dat er maar één tag op een bepaalde pagina kan staan, dus er zijn minder kansen op conflicten.

Type Selector Specifity en prestaties

Type Selectors bevinden zich op het laagste niveau van de specificiteitscascade (meestal geschreven als 0, 0, 0, 1), wat betekent dat bijna alles de stijl overschrijft die alleen via een Type Selector wordt toegepast, en een Type Selector aan een klasse of ID toevoegt in uw CSS biedt minimale extra specificiteit.

Type Selectors scoren ook lager op de CSS-efficiëntieschaal dan klassen en ID's. Daarom is het technisch gezien een betere prestatiekeuze om een klasse of een ID te gebruiken in plaats van de meer generieke Type Selector (hoewel het werkelijke snelheidsverschil doorgaans verwaarloosbaar is).