ToolHub
Tool openen

CSS Specificity Calculator

Bereken en vergelijk CSS-selector specificiteitsscores met visuele uitsplitsing

Developer Tools
Tool starten Alle tools

Over deze tool

Met de CSS Specificity Calculator kun je elke CSS-selector invoeren en direct de specificiteitsscore zien, uitgesplitst in ID's, classes en elements. Het ondersteunt vergelijking van twee selectors naast elkaar met automatische winstdetectie, samen met veelvoorkomende selectorvoorbeelden en een referentie voor specificiteitsregels.

Belangrijkste functies

Snel voorbeeld

Toepassingen

css specificity selector

Veelgestelde vragen

Wat is CSS-specificiteit?

CSS-specificiteit is een scoresysteem dat bepaalt welke CSS-regels worden toegepast wanneer meerdere selectors hetzelfde element targeten. Het wordt berekend op basis van de gebruikte selectortypes: ID-selectors hebben het hoogste gewicht, gevolgd door class- en attribuutselectors, dan element-selectors.

Hoe wordt specificiteit berekend?

Specificiteit wordt berekend als een driedelige score (ID's, Classes, Elements). Elke ID-selector telt 1 bij de ID-kolom, elke class-, attribuut- of pseudo-class-selector telt 1 bij de class-kolom, en elke element- of pseudo-element-selector telt 1 bij de element-kolom.

Overschrijft !important specificiteit?

Ja, de !important-declaratie overschrijft alle normale specificiteitsberekeningen. Wanneer meerdere !important-regels conflicteren, wint degene met de hogere specificiteit. Inline-stijlen overschrijven ook alle selector-gebaseerde specificiteit.

Kan ik twee selectors naast elkaar vergelijken?

Ja, de tool biedt een vergelijkingspaneel naast elkaar waar je twee selectors kunt invoeren en direct zien welke de hogere specificiteit heeft. Er wordt automatisch een winnaarsbadge weergegeven naast de selector met de hogere score.

Welke selectortypes ondersteunt de calculator?

De calculator ondersteunt ID-selectors, class-selectors, attribuutselectors, pseudo-class-selectors zoals :hover en :nth-child, element-selectors en pseudo-element-selectors zoals ::before en ::after. Het biedt ook veelvoorkomende voorbeelden die je kunt aanklikken om in te vullen.

Gerelateerde tools

JSON ValidatorColor PickerHash GeneratorUUID Generator