Particular css class being ignored

Once in a while, a css rule will be ignored, despite being correctly defined in the loaded stylesheet, and correctly targeted at a class patently present in the markup. Has anyone come across this, and can anyone explain what is going on?

You will not be able to reproduce the issue, but consider the following, pasted from markup/scss:

.test-footer {
	display: none;
	background: red !important;		
.test-footer {
	display: none;
<footer class="test-footer"></footer>

The topmost rules did nothing (I added the red !important line just to be sure it wasn’t being overridden). Then, without changing anything else, I added the second, identical rule, which was honoured without issue.

I have experienced this a few times now – not so frequently that it has entered my offhand list of things to look for when css misbehaves, but often enough over the last year that I have taken notice.

I am using Coda 2, and working on a mac running OSX El Capitan. Also, I am using the Coda sass plugin to compile.

The behaviour was consistent across browsers, and editing any other part of the stylesheet produced the expected results. As stated above, I checked, and the correct css was there all along – one part of it was simply ignored.

My solution should not work, so why does it? Come to that, the issue should not arise in the first place, so why did it?


I enabled hidden characters, to see if they might be the culprit, like Ruud Helderman suggested below, but I found nothing. In the end I had to let it lie. I solved my problem, after all, even though the “solution” was a magical fluke, or rather the problem was, and the question was asked as much out of intellectual curiosity as anything else. I am leaving the question unanswered for now, thinking that when and if it occurs again, I will update with any findings.

My only experience that comes anywhere near what you describe, is a syntax error in the stylesheet causing all subsequent rules to be ignored. Rules preceding the faulty rule would still be effective.

Another possibility might be the presence of an invisible character (e.g. U+200B); try to configure your text editor to reveal non-printable characters.