I am using Chrome DevTools Coverage tab to check the used part of a CSS file on wegpage https://www.datanumen.com/outlook-repair/, as below:
In the CSS file https://www.datanumen.com/wp-includes/css/dist/block-library/style.min.css?ver=5.8,
among 3000 lines, only 3 lines are used. But how to find out the locations where these CSS rules are applied in the source HTML page?
Update
I go to "Elements" tab, then press Ctrl + F, then input class name "aligncenter", the first one found is as below:
It seems that there are two files that use the same class name "aligncenter" in its CSS rule. As the block library CSS comes from Gutenberg editor, while style.css is developed by the company who develop the website. It is very likely the block CSS should be removed. However, I want to know further if there is a way or tool to find such a case, i.e., multiple CSS files use the same class name as the selector(CSS class name collision)? I think such a case should be rather common in large website.
Moreover, when searching the 2nd instance of the aligncenter, I get the following result:
It says "No match selector or style", why?
Hei, instead of going to the source options, go in the Elements tab and look over the rule you are searching for, press on it and on the right you can see which file applies that style, and at which row. Like the screenshot below (just an example)
EDIT
2 CSS files use the same class name for the same CSS rule, how to find such a case?
Well, there are cases where multiple CSS files could apply style at the same class element. This divides into 2 categories:
In the first case, there are no issues, and both styles will be applied. And to track those styling rules, you'd need to check both files.
In the second case, the style will be applied by the last rule, so the last read by the system (example below)
Also, on the second posted screenshot, you can see that the element that has "no applied style" simply does not exist, and is not a real element but a string You can see in this screenshot that the image element is written between double quotes and does not represent a real HTML element. so no styling will be applied