Issue with adjacent CSS Selector in Chrome and in Safari -

consider following (fiddle found here http://jsfiddle.net/burninromz/yduzc/8/)

what should happen when click checkbox, appropriate label should appear. not work in safari , chrome, on ie, firefox , opera. when inspect elements in both chrome , safari, see style applied element, not rendered correctly. ideas why 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 not work

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

you can try using sibling combinator. ~ similar +, however, it’s less strict. while adjacent selector select first element immediately preceded former selector, 1 more generalized. select elements long follow former selector in tree.

so, css 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 working example, provided @adrift, using above code: jsfiddle.net/yduzc/10