CSS 詳細度計算ツール

What Is CSS Specificity?

CSS specificity determines which style rule wins when multiple rules target the same element. It is calculated as a three-part score (IDs, Classes, Elements). ID selectors score in the first column, class selectors and pseudo-classes in the second, and element type selectors in the third. A higher value in any column wins over lower values in all columns to its right.

Understanding CSS specificity is essential for debugging unexpected styles, avoiding excessive use of !important, and writing maintainable stylesheets. This calculator parses any valid CSS selector and shows its exact specificity score instantly.

How to Use the CSS Specificity Calculator

1. Type or paste a CSS selector into the input field, or click one of the example presets.
2. The specificity score updates instantly, shown as (IDs, Classes, Elements).
3. Use the Compare panel to enter two selectors and see which one wins.
4. The color legend at the bottom explains what each column counts.

Features

• Parses ID selectors, class selectors, attribute selectors, pseudo-classes, and pseudo-elements
• Handles :not(), :is(), and :has() — counts specificity of their arguments
• Correctly gives :where() zero specificity
• Side-by-side selector comparison with winner highlight
• 10 built-in example selectors for quick exploration
• Visual bar indicators per specificity column
• Instant results — no server requests

FAQ

How is CSS specificity calculated?

CSS specificity is represented as three numbers (A, B, C). A counts ID selectors (#id), B counts class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover), and C counts element type selectors (div, p) and pseudo-elements (::before). Higher A always wins over B or C, regardless of the numbers.

Does * (universal selector) have any specificity?

No. The universal selector (*), combinators (+, >, ~, space), and :where() all have zero specificity (0,0,0). They match elements but do not contribute to the specificity score.

What is the specificity of :not()?

:not() itself has no specificity, but the selector inside :not() does count. For example, :not(.active) contributes 0,1,0 because .active is a class selector.

When do two selectors with equal specificity apply?

When two selectors have equal specificity, the one that appears later in the CSS source order wins. This is the cascade order rule. Specificity alone does not determine the winner when scores are identical.