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 (1)

Collapse
bdelespierre profile image
Benjamin Delespierre

Very interesting