Take the 2-minute tour ×

The HTML spec allows for periods (.) in an id:

<img id="some.id" />

However, using a CSS ID selector rule will not match correctly:

#some.id { color: #f00; }

The CSS spec for ID Selectors does not mention this case. So I assume it is using the combination of a tag name and class selector? For example, a CSS rule of a.className would apply to all anchor tags (<a>) with a class name of className, like <a class="className"></a>.

Is it possible to have an external CSS file rule that references an HTML element by its id that has a period in it?

I expect not since the CSS spec specifies that a CSS "identifier" does not include the period as a valid character. So is this a fundamental mismatch between HTML and CSS specs? Is my only alternative to use a different type of CSS selection? Can anyone smarter than I confirm or deny this?

(I would remove the period from the HTML id attribute to simplify things, but it is a system-generated id, so I don't have the ability to change it in this case.)

share|improve this question
You could say that this is a fundamental mismatch between HTML and CSS. However, as they're two different languages, it is not expected that they match up; an HTML identifier is an HTML identifier while a CSS identifier is a CSS identifier. Also, CSS can style other languages too, not just HTML (although granted, CSS was made for HTML in the beginning). –  BoltClock Sep 7 '12 at 8:01
Also #some.id is using the combination of ID and class selector. –  BoltClock Sep 7 '12 at 8:02
Is the ID the only attribute that you have as style hook? I know it's a little off-topic, but I'm wondering why you'd want to use an ID instead of img or a class (if available). –  Jayx Aug 6 at 19:40
@Jayx RE "Why use an ID instead of img (tag) or a class?" It varies for lots of reasons and situations. But in this case, a specific element needed styled, not all images on the page. A class could have been used if the HTML could be modified, but in this case it couldn't be modified as it was generated by a system beyond our control. –  Jon Adams Aug 6 at 22:39

2 Answers 2

up vote 49 down vote accepted

Classic. Just after digging through all the specs writing the question, I read through it some more and found there is an escape character. I've never needed it before, but the CSS spec does allow for backslash (\) escaping like most languages. What do you know?

So in my example, the following rule would match:

#some\.id { color: #f00; }

share|improve this answer
Good research job. There should be more Q&A like this, no like „write my code instead of me“. –  Pavlo Sep 7 '12 at 9:20
Mark your answer as accepted — it's the truth! –  Barney Mar 22 '13 at 13:50
@Barney: Forgot to go back after the waiting period to mark it. Thanks for reminding me. Glad it helped you too! –  Jon Adams Mar 22 '13 at 14:29
nice research. I just ran across this in a large enterprise application im working on. I was totally stumped and never seen it before. whats the point of making an id with a period in it?? –  Anthony Nov 13 '13 at 19:16
@Anthony: There isn't a specific reason to put a period in an HTML id attribute. I guess sometimes authors just want to? Maybe in some cases it could be bleed over from the underlying implementation systems that might use periods in the server-side code's identifiers for form processing? I'm sure everyone that does has their own reasons; but there is no HTML/CSS reason to include them. –  Jon Adams Nov 13 '13 at 20:30

You could also use img[id=some.id]]

More info here: http://www.w3.org/TR/selectors/#attribute-selectors

share|improve this answer

Your Answer


