4

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

Dano007
  • 1,872
  • 6
  • 29
  • 63

1 Answers1

7

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?

Community
  • 1
  • 1
NoobEditor
  • 15,563
  • 19
  • 81
  • 112