Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS selector with period in ID

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.)

like image 258
Jon Adams Avatar asked Sep 07 '12 00:09

Jon Adams


People also ask

Can an ID be used as a selector in CSS?

The CSS id SelectorThe id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

How do you target ID in CSS?

To use an ID selector in CSS, you simply write a hashtag (#) followed by the ID of the element. Then put the style properties you want to apply to the element in brackets.

Which of the following selector uses the period character?

Class Selector(“.”): The class selector selects HTML elements with a specific class attribute. It is used with a period character “.” (full stop symbol) followed by the class name.

Which is the correct selector for an ID?

The selector must start with a pound sign ( # ) and then the value of the id attribute. The browser will then look for a tag in the page that has an id attribute equal to that id.


2 Answers

After digging through the specs some more, I found the CSS spec does allow for backslash (\) escaping like most languages.

So in my example, the following rule would match:

#some\.id {   color: #f00; } 
like image 88
Jon Adams Avatar answered Sep 18 '22 18:09

Jon Adams


You could also use the attribute selector like this:

[id='some.id'] {   color: #f00; } 
like image 30
SDD512 Avatar answered Sep 18 '22 18:09

SDD512