Issue with adjacent CSS Selector in Chrome and in Safari

Question

Consider the following (Fiddle found here http://jsfiddle.net/burninromz/YDuzC/8/)

What should happen is when you click the checkbox, the appropriate label should appear. This does not work in Safari and Chrome, but on IE, Firefox and Opera. When you inspect elements in both chrome and safari, you see that the style is actually applied to the element, but is not rendered correctly. Any ideas why this is?

See below.

html

<div>
    <input type="checkbox"></input>
    <span>Unchecked</span>
    <span>Unchecked</span>

css

    input[type="checkbox"]:checked + span {
      display:none  
    }

    input[type="checkbox"] + span {
      display:block  
    }

    input[type="checkbox"]:checked + span + span {
      display:block  
    }

    input[type="checkbox"] + span + span {
      display:none  
    }

This selector does not work

input[type="checkbox"]:checked + span + span {
  display:block  
}

Answer 1

You can try using the sibling combinator. ~ is similar to +, however, it’s less strict. While an adjacent selector will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select any elements as long as they follow the former selector in the tree.

So, your CSS would look like this...

input[type="checkbox"]:checked + span {
  display:none  
}

input[type="checkbox"] + span {
  display:block  
}

input[type="checkbox"]:checked ~ span ~ span {
  display:block  
}

input[type="checkbox"] + span + span {
  display:none  
}

Here is a working example, provided by @Adrift, using the above code: jsfiddle.net/YDuzC/10