Ga naar inhoud
TextArray1.41.0
100% lokaal

CSS-specificiteitscalculator

Bereken de specificiteit van CSS-selectors en zie welke wint.

Invoer
Uitvoer
Gerelateerde tools
CSS-formatterOntwikkelaarstools
CSS-verkleinerOntwikkelaarstools
CSS-eenheidconverterOntwikkelaarstools
i18n sleutel diffOntwikkelaarstools
TOML naar JSON-converterOntwikkelaarstools
SQL naar JSONOntwikkelaarstools
CSS-specificiteitscalculator
Voer één of meer CSS-selectors in, één per regel, en deze tool berekent de specificiteit van elke selector als een standaard driedelige score: ID's, klassen (plus attributen en pseudo-klassen) en elementen (plus pseudo-elementen). Specificiteit bepaalt welke conflicterende regel een browser toepast. Het is handig wanneer twee stijlregels hetzelfde element als doelwit hebben en u wilt weten welke wint, of wanneer u debuggt waarom een override niet werkt.
Schakel Kommagescheiden lijsten splitsen in om elke selector in een lijst zoals ".a, .b" op zijn eigen regel te scoren in plaats van ze te combineren. Sorteren op sterkste eerst herschikt de resultaten van hoogste naar laagste specificiteit. Kies Tabel voor een kolomindeling met uitgesplitste ID's, klassen en elementen, of 0-1-2-notatie voor een compacte score zoals "1-0-2" per selector. Uitsplitsingsuitleg tonen geeft aan welk deel van elke selector — een ID, een klasse, een element — bijdroeg aan de score. Dit is de snelste manier om precies te zien waarom één regel een ander overtreft.
De calculator volgt de CSS Selectors-specificatie voor lastige gevallen: :where() scoort altijd nul ongeacht wat erin staat, terwijl :is(), :not() en :has() de specificiteit van hun meest specifieke argument aannemen. Een selector met !important wordt gemarkeerd, omdat het de normale cascade overrideert ongeacht specificiteit. Windows- en Unix-regeleindes worden hetzelfde behandeld en lege regels worden genegeerd.
Alles wordt lokaal in uw browser uitgevoerd — de selectors die u plakt worden nooit ergens geüpload. Dit is belangrijk wanneer u controleert tegen een privécodebasis. Kopieer het resultaat, download het als .txt-bestand, of stuur de uitvoer terug naar de invoer om uw selectors verder aan te passen.
FAQ
Wat betekent de 0-1-2-notatie?
Elk getal is een specificiteitstier: het eerste telt ID-selectors, het tweede telt klassen, attributen en pseudo-klassen, en het derde telt element- en pseudo-element-selectors. Een selector met een hoger eerste getal zal altijd een getal met alleen een hoger tweede of derde getal overtrumpen.
Hoe worden :not(), :is() en :has() gescoord?
Deze pseudo-klassen nemen de specificiteit van de meest specifieke selector in hun haakjes aan — :not(.a, #b) zet net zo hoog als #b — in plaats van zelf gewicht toe te voegen. :where() is de uitzondering: het scoort altijd nul, hoe complex de selectorlijst erin ook is.
Beïnvloedt !important de specificiteitsscore?
Nee. !important overschrijft de normale cascade ongeacht specificiteit, dus het verandert de score van een selector niet. Het hulpmiddel markeert selectors die het bevatten als een aparte opmerking, omdat het gemakkelijk over het hoofd kan worden gezien bij het vergelijken van regels.
Wat gebeurt er met een kommagescheiden lijst zoals ".a, .b"?
Als Kommagescheiden lijsten splitsen is ingeschakeld, wordt elke selector in de lijst op zijn eigen regel gescoord, wat overeenkomt met hoe een browser ze eigenlijk evalueert. Zet de optie uit om de hele regel als één gecombineerde selector te scoren.
Wordt mijn CSS ergens geüpload?
Nee. Specificiteit wordt volledig in uw browser berekend — de selectors die u plakt verlaten nooit uw apparaat.