ToolNova

🖌️ CSS Specificity Calculator — Selector Weight

Paste one selector to see its specificity tuple. IDs outweigh classes, and classes outweigh elements. :where() adds no weight; :is() and :not() use the most specific argument.

Design Free · no sign-up Added 2026-10-05
Input
Result
Specificity 

  




  Breakdown
  



        

      

    

    

      
      Private by design. This tool runs entirely in your browser — nothing you enter or add is uploaded to any server.
    

  


  

    
How it works

    
    
      
  1. Enter a single selector, not a full rule with braces.
    2. 
      
  2. Press Calculate specificity. The tuple is inline styles, IDs, classes/attributes/pseudo-classes, then elements/pseudo-elements.
    3. 
      
  3. Compare tuples left to right. A higher number in an earlier column wins.
    4. 
    


    
Examples

    
    
      
  • #main .item scores (0, 1, 1, 0).
    • 
      
  • nav .menu > a:hover scores (0, 0, 2, 2) because :hover is a pseudo-class.
    • 
      
  • button scores (0, 0, 0, 1).
    • 
    


    
Frequently asked questions

    

  

    Does !important change the tuple?
    
No. !important is a separate cascade layer and is not part of the specificity tuple. Remove it from the selector before scoring.

  

  

    How are :is() and :where() handled?
    
:where() contributes nothing. :is() and :not() contribute the highest specificity among their arguments, not the sum of every argument.

  

  

    Are commas supported?
    
Enter one selector. If you paste a comma-separated list, only the first selector is scored and a note is shown.

  



  


  

    

      
      More Design tools →