3

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:

enter image description here

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:

enter image description here

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:

enter image description here

It says "No match selector or style", why?

alancc
  • 487
  • 2
  • 24
  • 68
  • 3
    You could go to the Elements tab, click on 1 element and ctrl+f search for the classname. – Olaf Aug 10 '21 at 11:55
  • @Devilscomrade, Thank you very much. Just do that and I find some issues, which are put in "Update" sections. – alancc Aug 10 '21 at 21:17

1 Answers1

2

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) 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:

  1. The one that applies different styles to the same class
  2. The one that applies the same styles to the same class

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) You can see how it works

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 noscript 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

noxter
  • 186
  • 1
  • 11
  • Thank you very much. I follow your instructions and find some issues, which are put in "Update" section. – alancc Aug 10 '21 at 21:17
  • I edited the answer based on your new edit to the origin question – noxter Aug 10 '21 at 21:53
  • Thank you very much. What I mean is how to find all duplicate class(or selectors) in the CSS files used by a web page? – alancc Aug 11 '21 at 01:10
  • I saw this post is very helpful, check it out [get CSS](https://stackoverflow.com/questions/4361007/is-there-a-way-to-check-which-css-styles-are-being-used-or-not-used-on-a-web-pag) – noxter Aug 11 '21 at 06:27