CSS Valid But Not Applying Dynamically

Question

DISCLAIMER: I have searched this topic to no avail, this seems to be a Chrome only issue.

Safari for OSX and Firefox OSX work fine.

So I have some styles for an element which do not dynamically apply, ie on page load it works fine but as i use the page, it doesn't.

Here's a pen to demonstrate: http://codepen.io/craig-wayne01/pen/xcIid

and the selector thats giving me the problem is this one

label.pagination:first-of-type,
     label.pagination:last-of-type,
     input.pagination[type=radio]:checked+label.pagination,
     input.pagination[type=radio]:checked+label.pagination+input[type=radio].pagination+label.pagination

So basically this is an example of a pagination footer area

and what im trying to achieve is simply changing the colour of the next number

so if i click on #4, #5 needs to change colour as well

which doesn't work.

Then pen is quite self explanatory. Additionally I can't fathom why this doesn't work. Any help would be greatly appreciated

The only thing i can think of is that css does not work backwards, but i've used similar selectors in the past and i've had no issue.

Answer 1

From my experience attempting something similar for a CSS only mobile menu, checking or focusing elements doesn't force a redraw for sibling elements. I had this trouble on the iPad.