Styling direct children (*-{modifier}) issue

[formyjobonly]

Hi Tailwindcss Team!

Seems this statement: "It’s important to note that overriding a style with a utility directly on the child itself won’t work due to the specificity of the generated child selector." - is not correct.

It's more about order of appearence.

https://tailwindcss.com/docs/hover-focus-and-other-states#styling-direct-children

[philipp-spiess]

Hey! The specificity of a selector using child combinators may be higher than one that doesn't, even though this is not reflected in the specificity value. You can learn more about it here:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#no_value

Combinators, such as +, >, ~, " ", and ||, may make a selector more specific in what is selected but they don't add any value to the specificity weight.

So while you're right that *:… utilities will appear later in the generated stylesheet, I don't think it's necessarily wrong to call out specificity here. Thanks for the comment tho!