Revision history [back]

To view the precise CSS specificity in Chrome Dev Tools, follow these steps:

1. Open the Chrome Dev Tools by pressing F12 on your keyboard or right-clicking on the webpage and selecting "Inspect".
2. Navigate to the "Styles" tab on the right-hand side of the Dev Tools.
3. Identify the CSS declaration you want to check the specificity of and hover your mouse over the declaration. A tooltip will appear displaying the rule's specificity.
4. Additionally, you can view the full specificity breakdown by clicking on the target element within the "Elements" tab and looking at the "Styles" tab. The specificity of each CSS rule will be displayed next to the rule.