Chrome iOS Pseudo-Class Sibling Selector Bug

Bug

If you try to use the general sibling selector (~) alongside a pseudo class (:checked, for example) in Chrome on iOS, it is ignored. Here’s a JSFiddle that demonstrates the problem.

input[type="radio"]:checked ~ label.radio

Fix

I’ll cut right to the fix, and then give some more background the on bug.

The fix is to use the adjacent sibling selector (+), instead of the general sibling selector. Here’s that same JSFiddle updated to reflect that fix.

input[type="radio"]:checked + label.radio

Background

It appears that this bug has some history. CSS Tricks had a good article about this bug back in 2011 with plenty of sources. In the CSS Tricks Almanac entry for the general sibling selector, there’s a comment from November 19th, 2015, that a recent Chrome build for iOS9 reintroduced the bug.

Hopefully the Chrome iOS Team will get a fix out for this bug, soon! I’ll update this post when that happens.