CSS and Security Tools
CSS Specificity Calculator
The CSS Specificity Calculator shows you exactly why one CSS rule overrides another. Enter multiple selectors and see their specificity scores as (a, b, c) tuples — where a = ID selectors, b = class/attribute/pseudo-class selectors and c = element/pseudo-element selectors.
Color-coded token breakdown shows each component of the selector with its contribution:
- Red = ID selector (adds 1 to column a)
- Blue = class, attribute, pseudo-class (adds 1 to column b)
- Green = element, pseudo-element (adds 1 to column c)
- Gray = universal *, combinators (no contribution)
Enter two or more selectors to see which wins the cascade — the highest (a,b,c) score wins.
Special cases handled: :not(), :is(), :has() take the specificity of their most specific argument. :where() always contributes (0,0,0). !important is not a selector — it overrides the cascade entirely.
HTTP Security Headers Analyzer
The HTTP Security Headers Analyzer fetches any public URL via our proxy and checks the response headers against 10 security best practices. Each header is rated and graded A+ through F.
Checks include:
- Strict-Transport-Security (HSTS) — forces HTTPS, checks max-age and includeSubDomains
- Content-Security-Policy — detects unsafe-inline, unsafe-eval and wildcard sources
- X-Frame-Options — clickjacking protection
- X-Content-Type-Options — MIME sniffing prevention
- Referrer-Policy — privacy leak detection
- Permissions-Policy — browser API restrictions
- X-Powered-By / Server — server fingerprinting exposure
Click any result to see the current header value, what is wrong and the exact fix to apply.