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  
}

This *may* be a dupe of my own question: http://stackoverflow.com/questions/17219286/why-does-the-general-sibling-combinator-allow-toggling-pseudo-elements-content (I'm not sure, but it seems likely to be the same bug). — David Thomas, Sep 03 '13 at 20:46
If you instead use the general sibling combinator on your second to last selector it'll work like you'd expect FYI: http://jsfiddle.net/YDuzC/10/ — Adrift, Sep 03 '13 at 20:55

score 3 · Accepted Answer · edited May 23 '17 at 12:22

3

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

edited May 23 '17 at 12:22

Community

1
1

answered Sep 04 '13 at 00:08

Kirkland

2,319
4
20
27

Thanks, I actually ended up with a similar solution, just need 1 general selector e.g. 'input[type="checkbox"]:checked + span ~ span' . It only works when there is only two child elements. Prolly need to test it when you have more. As David Thomas mentioned this prolly related to the webkit issue where chrome and safari breaks when selectors are used with pseudo properties. – CodeMonkey Sep 05 '13 at 15:23
Nice. You may also find this useful... [30 CSS Selectors You Must Memorize](http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/) – Kirkland Sep 05 '13 at 19:54
Thanks, was able to resolve this issue using ~. This issue still exist even in chrome version 31 but can only be seen if you are on a page that uses a lot of css. – Anubhav Gupta Nov 20 '13 at 09:13

score 0 · Answer 2 · answered Sep 05 '13 at 20:57

I would use the :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";
}

Example Pen

Issue with adjacent CSS Selector in Chrome and in Safari

2 Answers2