Menu
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.
315
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?
117
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
