Why does the general-sibling combinator allow toggling pseudo-element's content, but not the adjacent-sibling?

Question

In this question \"CSS3 Selector That Works like jQuery's .click()?\" I posted an answer using the :checked state of an input, of type=\"

Answer 1

This is a long-standing bug in WebKit browsers related to the use of certain dynamic pseudo-classes with next-sibling combinators. This happens whether you're applying styles to the sibling element itself or a pseudo-element of that sibling element.

I don't know if anybody has filed a bug report yet, but this has been seen rather frequently on the site:

• Webkit bug with `:hover` and multiple adjacent-sibling selectors
• CSS adjacent sibling selectors, Safari and <nav> elements

Strangely it was also reported that Chrome had issues with the general sibling combinator, but as you note it works in your given scenario:

• Why doesn't this CSS selector work: a:hover ~ span?

So either that was fixed, or something else triggers/triggered it.

Answer 2

Bug Work Around

Apparently, certain valid pseudo-classes chained together allows it to work.

These work (see Fiddle #1, Fiddle #2, Fiddle #3):

#switch:checked + nav:only-of-type + label::before
#switch:checked + nav:nth-of-type(1) + label::before
#switch:checked + nav:nth-child(2) + label::before

This did not (see Fiddle #4):

#switch:checked + nav:not([class]) + label::before

I tried some other :not() combinations, none of which allowed it to work.

** Best choice **

#switch:checked + nav:nth-child(n) + label::before