CSS ID Selection for Elements with Dotted IDs

The CSS specification allows for ID selectors to identify specific HTML elements. However, an issue arises when an ID contains a period (.). CSS ID selectors do not natively support such IDs.

Despite the lack of clear mention in the CSS specification, the assumption is that CSS ID selectors treat ID with periods as a combination of tag name and class selector. For instance, "#id.class" would target all elements with the ID "id" and the class "class."

However, defining an external CSS rule that references an HTML element with a dotted ID poses challenges. The CSS specification specifies that a CSS "identifier" does not include the period character. This creates a potential mismatch between HTML and CSS specifications.

The alternative solution to using CSS ID selectors is to explore other CSS selection types. However, in cases where changing the HTML ID is not feasible, a workaround exists.

According to the CSS specification, backslash () escaping is permitted. Therefore, to target an HTML element with a dotted ID, use the following syntax:

#some\.id {
  /* CSS Declarations */
}

In this example, the backslash before the period allows the CSS selector to correctly identify the element with the ID "some.id."