CODEWITHSUNDEEP
htmlcssgoogle-chrome
Dano007
Dano007

Reputation: 1932

What do repeating css selectors mean when displayed via Google Chrome console log?

Please can someone explain what the issue is when I see a css selector repeated when shown in the Google chrome console log? Why does the second instance have lines through it.

I'm guessing this is a coding error that I will need to fix.

FYI - As per the screen shot below, both .items come from the same css file.

enter image description here

Upvotes: 4

Views: 1665

Answers (1)

NoobEditor
NoobEditor

Reputation: 15921

It appears because the CSS is found twice in the file.

crossed out lines means, that those styles were found but have been overwritten.

To put simply,   display:block  like console means that the CSS was applied but then some more relevant CSS is found and overwrote the current one.

So for example, if you have markup like :

<html>
    <head>
        <style>
            h2#title{color : red}
            h2#title{color : yellow}
        </style>
    </head>
    <body>
        <h2 id="title"> Hi </h2>
    </body>
</html>

then, since h2#title is found twice in the file, only one can be applied, so, you will see something like this, whichever got overwrote would be crossed :

h2#title{
     color : red  
}

A Good Read on this : https://developer.chrome.com/devtools/docs/elements-styles?csw=1&safe=on#computed_style

Related Helpful Thread : Chrome Developer Tools: How to find out what is overriding a CSS rule?

Upvotes: 8

Related Questions