3

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.

Param Singh
  • 1,325
  • 3
  • 13
  • 28
  • Please add your HTML and CSS here. Do not force readers to follow the link in order to see your code. – BoltClock Jan 25 '17 at 14:18
  • @BoltClock It's a good practice to mention the codepen so that anyone who want to answer it can do it easily. Most of the times people on the forum ask for codepens or fiddles. – Param Singh Jan 25 '17 at 15:33
  • No one can answer your question without clicking the link. That's not acceptable. You can include a pen but the code needs to be in the question *regardless* of whether you include one. – BoltClock Jan 25 '17 at 15:35

1 Answers1

2

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).

Danield
  • 121,619
  • 37
  • 226
  • 255