CSS-specificiteit berekenen
Bereken en vergelijk specificiteitsscores van CSS-selectors
Invoer en opties
Snelle voorinstellingen en voorbeelden
Draait in uw browser. Uw invoer blijft op dit apparaat.
Resultaten
Voer uw waarden in om het resultaat te zien.
Over de gratis CSS-specificiteitscalculator
De CSS-specificiteitscalculator is een gratis tool waarmee webontwikkelaars de specificiteit van CSS-selectors begrijpen, berekenen en debuggen. Specificiteit is het algoritme dat browsers gebruiken om te bepalen welke CSS-regel voorrang krijgt wanneer meerdere regels hetzelfde element raken. Het wordt uitgedrukt als een waarde van drie delen (a, b, c), waarbij elk onderdeel een andere categorie selectorgewicht weergeeft.
Inzicht in CSS-specificiteit is een van de belangrijkste vaardigheden voor front-endontwikkelaars. Als stijlen niet worden toegepast zoals verwacht, ligt de oorzaak vaak bij specificiteitsconflicten. Deze calculator splitst elke CSS-selector direct op in de specificiteitsonderdelen en laat precies zien hoeveel ID-selectors (a), klasse-, attribuut- en pseudoklasse-selectors (b) en element- en pseudo-elementselectors (c) bijdragen aan de eindscore.
De tool heeft een krachtige vergelijkingsmodus waarmee u twee selectors naast elkaar zet om te zien welke de specificiteitsstrijd wint. Dat is onmisbaar bij het debuggen van CSS-conflicten, het herstructureren van stylesheets en het leren hoe de cascade werkt. Visuele staafdiagrammen en kleurgecodeerde overzichten maken specificiteit begrijpelijk en overzichtelijk, ook voor ontwikkelaars die nieuw zijn met CSS.
Belangrijkste functies
- Directe specificiteitsberekening voor elke geldige CSS-selector
- Visueel staafdiagram met het relatieve gewicht van ID's, klassen en elementen
- Kleurgecodeerd overzicht van elk selectoronderdeel (ID's in rood, klassen in geel, elementen in blauw)
- Vergelijkingsmodus om twee selectors tegen elkaar uit te spelen, met indicatoren voor winnaar en verliezer
- Ondersteuning voor complexe selectors, waaronder pseudoklassen, pseudo-elementen en attribuutselectors
- Correcte verwerking van de specificiteitsregels van de pseudoklassen :not(), :is() en :where()
- 14 voorbeeldselectors voor veelgebruikte patronen, handig om snel te leren
- Specificiteitswaarden met één klik naar het klembord kopiëren
- Ingebouwde naslagkaart met specificiteitsregels
- Ondersteuning voor de donkere modus voor prettig gebruik in elke omgeving
De CSS-specificiteitscalculator gebruiken
- Voer een CSS-selector in: Typ of plak een willekeurige CSS-selector in het invoerveld. De specificiteit wordt direct berekend terwijl u typt.
- Bekijk het overzicht: Bestudeer de specificiteitswaarde (a, b, c), het visuele staafdiagram en het kleurgecodeerde overzicht van de onderdelen om te begrijpen hoe de score tot stand komt.
- Probeer de vergelijkingsmodus: Schakel over naar de vergelijkingsmodus om twee selectors in te voeren en te zien welke de hoogste specificiteit heeft, met duidelijke indicatoren voor winnaar, verliezer of gelijkspel.
- Gebruik de voorbeeldselectors: Klik op een van de 14 voorbeeldselectors om direct de specificiteit te zien. In de vergelijkingsmodus vullen de voorbeelden het eerste lege selectorveld.
- Kopieer het resultaat: Klik op de kopieerknop naast de specificiteitswaarde om deze naar het klembord te kopiëren, voor gebruik in documentatie of codecommentaar.
Toepassingen
- CSS-conflicten debuggen: Achterhaal waarom de ene CSS-regel de andere overschrijft door de specificiteitsscores te vergelijken en de winnende selector te bepalen.
- Stylesheets herstructureren: Analyseer de selectorspecificiteit in uw codebase om te specifieke selectors te verminderen en de onderhoudbaarheid van CSS te verbeteren.
- De CSS-cascade leren: Gebruik de visuele overzichten en voorbeeldselectors om intuïtief te begrijpen hoe specificiteit in de praktijk werkt.
- Codereview: Controleer tijdens codereviews snel de selectorspecificiteit om specificiteitsoorlogen te voorkomen en een consistente opmaakaanpak te waarborgen.
- Lesgeven en workshops: Gebruik de vergelijkingsmodus en de visuele diagrammen als hulpmiddel bij CSS-workshops, bootcamps en online cursussen.
- CSS-architectuur plannen: Bepaal uw selectorstrategie (BEM, OOCSS, utility-first) door de gevolgen voor de specificiteit te begrijpen voordat u code schrijft.
- Frameworks aanpassen: Bereken de specificiteit wanneer u stijlen van Bootstrap, Tailwind of andere frameworks overschrijft, zodat uw eigen regels voorrang krijgen.
Veelgestelde vragen
Is deze tool gratis?
Ja, de CSS-specificiteitscalculator is volledig gratis te gebruiken. Er zijn geen gebruikslimieten, geen account nodig en geen betaalde abonnementen. Bereken en vergelijk zoveel selectors als u nodig hebt.
Zijn mijn gegevens veilig?
Zeker. Alle specificiteitsberekeningen gebeuren volledig in uw browser. Er worden geen CSS-selectors of andere gegevens naar een server verzonden. De tool werkt na het laden volledig offline.
Hoe werkt CSS-specificiteit?
CSS-specificiteit wordt berekend als een waarde van drie delen (a, b, c). Kolom “a” telt ID-selectors (#id), kolom “b” telt klasseselectors (.class), attribuutselectors ([attr]) en pseudoklassen (:hover), en kolom “c” telt typeselectors (div, p) en pseudo-elementen (::before). Hogere waarden in eerdere kolommen winnen altijd, ongeacht latere kolommen.
Hoe zit het met !important en inline stijlen?
Inline stijlen overschrijven alle specificiteit op basis van selectors, en !important overschrijft alles, inclusief inline stijlen. Deze worden buiten het specificiteitssysteem (a, b, c) afgehandeld en door deze tool niet berekend, omdat ze geen deel uitmaken van de selectorspecificiteit.
Hoe beïnvloedt :not() de specificiteit?
De pseudoklasse :not() zelf levert geen specificiteit op, maar het argument wordt gewoon meegeteld. :not(.active) voegt bijvoorbeeld (0, 1, 0) toe, omdat .active een klasseselector is. Op dezelfde manier neemt :is() de specificiteit van het meest specifieke argument over, terwijl :where() altijd nul specificiteit oplevert.
Wat gebeurt er als twee selectors gelijke specificiteit hebben?
Als twee selectors dezelfde specificiteitswaarden hebben, geldt de regel van de CSS-cascade: de selector die later in de broncode staat, krijgt voorrang. De vergelijkingsmodus toont in dat geval een indicator “TIE” (gelijkspel).
Tips & best practices
- Houd de specificiteit laag: Geef de voorkeur aan klasseselectors boven ID-selectors, zodat de specificiteit beheersbaar blijft en stijlen zo nodig makkelijker te overschrijven zijn.
- Vermijd !important: Het gebruik van !important wijst op specificiteitsproblemen. Los de oorzaak op door de selectorspecificiteit aan te passen in plaats van !important-declaraties toe te voegen.
- Gebruik BEM of een vergelijkbare naamgeving: Methodologieën zoals BEM (Block Element Modifier) houden de specificiteit vlak door vooral op enkelvoudige klasseselectors te vertrouwen.
- Controleer voordat u nest: Diep geneste selectors zoals #main .content .sidebar .widget p bouwen een hoge specificiteit op. Controleer dit met deze calculator voordat u de code vastlegt.
- Gebruik :where() voor nul specificiteit: Verpak selectors bij utility-stijlen of resets in :where(), zodat ze eenvoudig te overschrijven blijven.
- Vergelijk tijdens het debuggen: Als een stijl niet wordt toegepast, controleert u met de vergelijkingsmodus of een andere selector de specificiteitsstrijd wint.