Are there any tools out there that can look at my website HTML and tell me that (for example) "there is an HTML element at mysite.com/example.html using a class of SOMECLASS but SOMECLASS is not defined in any included CSS files".
?
Install the CSS Usage add-on for Firebug and run it on that page. It will tell you which styles are being used and not used by that page.
The .class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class.
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.
I've created a snippet that does exactly that: https://gist.github.com/kdzwinel/426a0f76f113643fa285
You can run it in the DevTools console and the sample output will look like this:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With