Can I Use CSS Selectors with Periods in IDs?

Using CSS Selector with Period in ID

Question:

Can a CSS selector rule be used to match an HTML element with an ID containing a period (.)?

Background:

The HTML specification permits periods in element IDs. However, a simple CSS ID selector like #some.id fails to match such elements correctly.

Analysis:

The CSS specification defines an identifier as not including periods. This suggests a fundamental incompatibility between HTML and CSS specs.

Solution:

Despite the initial suspicion, the CSS specification does allow for backslash () escaping. This enables the use of a period in an ID selector.

For instance, the following CSS rule would match an HTML element with the ID "some.id":

<code class="css">#some\.id {
  color: #f00;
}</code>

Conclusion:

While a period in an HTML ID creates a potential conflict with CSS ID selectors, the backslash escape sequence resolves this, allowing for the use of complex IDs in both HTML and CSS.

The above is the detailed content of Can I Use CSS Selectors with Periods in IDs?. For more information, please follow other related articles on the PHP Chinese website!