brld brld - 1 month ago 8x
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

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?



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


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:


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