Search code examples
csscss-selectorspseudo-class

What does the pseudo selector ":regular" do?

I've seen some code like this below:

.some-element\:regular {}

I checked for it on MDN but it doesn't seem to have it listed?

So my question is, what does this pseudo selector do and what is the purpose of the backslash(\)?

Solution

  • This is not a pseudo selector, CSS has special characters that cannot be applied in class names, so to use them, CSS escapes with a backslash (\)

    here is the list of the special characters:

    !, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \, ], ^, `, {, |, }, and ~

    See an example:

    .some-element\:regular { background:red}
.some-element2:regular { background:red}
    <div class="some-element:regular"> this will be red</div>
<div class="some-element2:regular"> this will not be red</div>

    you can see more info here about CSS special characters here