Search code examples
htmlcsscss-selectorsratingrating-system

CSS :not selector confusing behavior

This is with reference to this codepen here https://codepen.io/jamesbarnett/pen/vlpkh?editors=1100

I'm was looking for some Pure CSS Star Rating system. I got really confused with the statement .rating:not(:checked) > label:hover

Can someone explain me how is it possible?? A .rating is a fieldset element. How can we even apply a :not(:checked) selector to it. It's never going to be checked. Had this been .rating input:not(:checked), it would have made sense to me.

Is it like it is somehow selecting the inputs inside it. Cause I am not able to find any documentation supporting this behavior of CSS :not selector.

I'm not able to understand how it is working surprisingly.

Solution

  • Since the element with class 'rating' is not a checkable input element the :checked pseudo class will never match.

    Conversely, the not(:checked) will always match (demo) - making it functionally redundant (except for added specificity) and can therefore safely be omitted

    Notice that you can remove the pseudo class from that selector and the demo still works the same (updated codepen).