Content is loading…
Share
Compute and compare CSS selector specificity (A, B, C) scores instantly.
How specificity is counted
A ID selectors (#id) · B classes (.class), attributes ([attr]) and pseudo-classes (:hover) · C element types (div) and pseudo-elements (::before). Compared left to right: (1,0,0) beats (0,10,10). The universal selector * and combinators add nothing. :is(), :not() and :has() take the specificity of their most specific argument, while :where() always counts as zero.
Calculate the specificity of CSS selectors and understand why one rule overrides another. Paste one or more selectors to get their (A, B, C) specificity scores — IDs, classes/attributes/pseudo-classes, and element types — shown in a ranked comparison table with visual weight bars. Correctly handles :is(), :not(), :has() and :where(), comma-separated selector lists, and pseudo-elements. Runs entirely in your browser.
Share this tool
Test regex patterns with live match highlighting.
Encode and decode Base64 strings instantly.
Convert images to video with the Ken Burns zoom/pan effect. Add music and export as WebM.