DEV Community

Cover image for Using symbols in CSS selectors
Zack Webster
Zack Webster

Posted on

Using symbols in CSS selectors

I recently came across a selector that caught my attention - .w-1/4. This class sets width to quarter in the Tailwind CSS framework.
Seeing a backslash in a class name was odd at first. Is it even valid? Turns out, it is.

There's a small gotcha. Defining the class name like .w-1/4 { ... } won't work.

So, how can we get class names like that?

Well, you have to escape the backslash with a forward slash.

For example,

.w-1\/4 {
  width: 25%;
}
Enter fullscreen mode Exit fullscreen mode
<div class="w-1/4">Hello World</div>
Enter fullscreen mode Exit fullscreen mode

But wait, that's not all.

We are not limited to just the backslash. You can do the same with almost anything which is a character from your keyboard!

Check this out,

.\%\@\% {
  ...
}
Enter fullscreen mode Exit fullscreen mode
<div class="%@%">Hello World</div>
Enter fullscreen mode Exit fullscreen mode

Conclusion

This implementation can come in quite handy and let you do selector names like sm:flex. Just make sure not to overdo it like in the later example.

Discussion (2)

Collapse
bdelespierre profile image
Benjamin Delespierre

Very interesting

Collapse
drorkrief profile image
drorkrief

you save my life
thank you