Can CSS Selectors Successfully Target Elements with Dotted IDs?

Addressing CSS Selectors with Periods in IDs

The HTML specification permits periods (.) in IDs, allowing elements to have identifiers like "". However, conventional CSS ID selectors, such as "#some.id { color: #f00; }", fail to match elements with dotted IDs.

Contrary to the CSS spec for ID Selectors, which omits this scenario, the issue stems from CSS's utilization of a hybrid tag name and class selector. A rule like "a.className" targets all anchor tags with a class name of "className".

The question arises: Can external CSS rules target elements with dotted IDs? The answer is nuanced. While the CSS specification restricts the use of periods in identifiers, a workaround exists through backslash () escaping.

This technique allows for the creation of selectors that match elements with periods. For instance, the following rule uses backslash escaping to target an element with the ID "some.id": "#some.id { color: #f00; }".

Thus, despite the specifications' discrepancies, it is possible to address elements with dotted IDs using CSS selectors by employing backslash escaping.

The above is the detailed content of Can CSS Selectors Successfully Target Elements with Dotted IDs?. For more information, please follow other related articles on the PHP Chinese website!