Problem with contiguous CSS selector in Chrome and Safari

Question

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

What happens when you check the box, the corresponding label will appear. This does not work in Safari and Chrome, but in IE, Firefox and Opera. When you check elements for both chrome and safari, you see that the style actually applies to the element, but does not display 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 a combination combinator. ~ similar to + , however its less strict. While the adjacent selector will select only the first element immediately preceded by the previous selector, it is more generalized. It will select any elements if they follow the previous selector in the tree.

So your CSS will 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 code above: jsfiddle.net/YDuzC/10

Answer 2

I would use :content psuedo-element

HTML

 <div> <input type="checkbox" class="check" /> <span></span> </div> 

CSS

 span{ display:block; } input[type="checkbox"] + span:before { content:"Unchecked"; } input[type="checkbox"]:checked + span:before { content:"Checked"; } 

Pen example