Describe the issue

CSS class and ID selectors contain arbitrary strings (e.g. .myclassname), which can contain escaped special characters (e.g. .foo\:myclassname to match class="foo:myclassname"). Currently, the backslash that escapes a special character is not recognised by highlight.js as a valid part of the class name or ID.

Which language seems to have the issue?

css

Are you using highlight or highlightAuto?

highlight

Sample Code to Reproduce

.dark\:hover\:bg-sky-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity));
}

Current highlighting:

Expected behavior

The escaped special characters (\:) should not interfere with the highlighting of the class name, but actual pseudoclasses (:hover) should still be highlighted.

GitHub:

VS Code:

Additional context

TailwindCSS makes extensive use of escaped characters in CSS selectors for its modifiers.

Other special characters are escaped for features like color opacity:

.dark\:hover\:bg-sky-500\/25:hover {
  background-color: rgb(14 165 233 / 0.25);
}

…and arbitrary values:

.dark\:hover\:bg-\[\#ff0000\]\/25:hover {
  background-color: rgb(255 0 0 / 0.25);
}