Why backslash after a .class in css?

s.k.paul 0
Viewed 34

I have seen the following CSS in an example -

.hover\:bg-gray-800:hover {
    background-color: #2d3748;
 }

My question is what is the usage of backslash here?

css
1 Answers

The colon in CSS has a special meaning; pseudo class selectors start with this special char, like :hover (which your code example actually has at the end), :active, :first-child.

The \ tells CSS to treat the following character not as a character with a special CSS meaning. This is generally called escaping.

This allows for usage of CSS class names containing a : in HTML:

.foo\:hover { color: orange; padding: 3em; }

.foo\:hover:hover { background-color: orange; color: white; }
<div class="foo:hover">foo bar here, hover me</div>

connexo0
Related