0

I saw some HTML the other day that had what looked like pseudo class selectors defined in the class attribute. Is this correct or is there something else going on?

It looked something like this:

<div class=“styles focus:styles2”>Ok</div>

Is it the same as this:

.styles {} 
.styles:focus {}

<div class=“styles”>Ok</div>

I will try and find the exact code but it was a while ago. Found it:

class="inline-flex items-center rounded-md border border-transparent px-1 text-xs font-medium leading-4 text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-primaryAccent focus:ring-offset-2"

And yes to the comment that asked if it was from Tailwind

Original post:

Working with Tailwind (CSS) for the first time and...does it get easier at some point? I feel like I'm constantly stringing together long sentences of class names. I miss working with just regular old CSS variables and REMs (and CSS modules)

BTW I don’t know what tailwind is but I’m guessing this is a feature it offers since a related post says that pseudo selectors are not supported.

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231

0 Answers0