Skip to contentSkip to footer

Changelog

  • Polypane 31 Latest

    Polypane 31 has a new Canvas layout, many improvements to the elements panel, new iPhone presets and Chromium 155.

  • Polypane 30.1

    Polypane 30.1 adds selector specificity highlighting to the elements panel, a new server-sent HTML view in the sources panel, passkey support in Linux and a bunch of improvements and fixes

  • Polypane 30

    Polypane 30 introduces Playgrounds so you can open directories as real HTTPS URLs in seconds, adds support for the Side Panel extension API, brings major Network panel improvements, and includes a fully rewritten video recording implementation

Full Changelog
Start Free Trial

CSS Selector Specificity Calculator

Calculate the specificity of selectors all the way up to CSS Selectors level 4

Tip Compare multiple selectors by using a comma: . See the specificity of each and sort to see which one wins.

Specificity explained right where you need it: in your browser.

Polypane shows the specificity of every selector in your styles, right in the elements panel.

Hover a selector and Polypane highlights the parts that add to its specificity. It even works for nested CSS and complex :is() selectors, so you always know why a style wins.

Polypane's elements panel highlighting the parts of a nested selector that make up its specificity of 1,1,1

See the specificity of your selectors directly in your browser

Start Free Trial

What is CSS selector specificity?

If an element is targeted by multiple selectors, browser use the specificity of the selector to determine which styling to apply. Each selector has a specificity that is determined by what you use in that selector: elements, ID's, classes etc. This specificity is split up in different levels.

A single value in a higher level is more important than all levels below it. For example, you can have a 1000 class names, and a selector with a single ID would still be more specific.

Gotcha's when dealing with CSS selector specificity issues

  • The universal selector * has no specificity.
  • properties with !important are applied even if the selector is less specific.
  • …Except for the properties with !important in same or a higher specificity selectors later in your CSS.
  • …Except for the style="" attribute on an element.
  • If you use a pseudo class like :not() or :is(), the selector inside it with the highest specificity determines the specificity.
  • Anything in a :where() has no specificity.
  • For :nth-child(), :nth-last-child(), :host() and :host-context() pseudo-classes the specificity is the combination of the pseudo-class itself (0,1,0) plus the most specific of the selectors in them.
  • For the ::slotted() pseudo-element the specificity is the combination of the pseudo-element itself (0,0,1) plus the specificity of the selector inside it.
  • Child or sibling selectors (>, ~, +) add no specificity.

Build the way you already build, without missing anything.

Free 14 day trial, no credit card needed.

  • 1 Create your account. Takes a minute.
  • 2 Download the app. For Windows, Mac & Linux.
  • 3 Build your next project with Polypane
Start Free Trial
Polypane UI