brld brld - 2 months ago 21
CSS Question

Interesting CSS selector

I have an interesting CSS selector here:

.gridcell[id="danger"] {
color: red;
}


I think that it should style the paragraph element in the following section:

<div class="gridcell" id="danger">
<p>fort_sumter</p> // this would be styled
</div>


However nothing is styled at all. To my understanding, the [] in the selector means that it is searching for something within gridcell that has the id of danger, which would be the p element, but it's not working. Any ideas of the correct html section that would be styled with this block of CSS?

Thanks,

brld

EDIT: Fixed the weird quotes that were there from Atom.

Answer

You have some strange Unicode quote there, specifically code point 8221 "Right Double Quotation Mark". It should be code point 34 "Quotation Mark".

Try to find the difference between the two: U+8221: U+34".

This could be caused by some interesting system keyboard settings, or if you wrote that CSS in a text processing application (e.g. MS Word, LibreOffice Writer, Google Docs, etc)

With the risk of repeating other answers, the canonical way of selecting by ID in CSS is by using the # character, followed by the ID you want to match:

.gridcell#danger

As a stylistic note, since IDs are unique, consider using a more descriptive name, or switch to a class.

Comments