2

Here is my HTML

<div class="test" onclick="this.querySelector('.rad').checked=true;">
   <input type="radio" class="rad" name="rad" />
   <div>hello</div>
</div>
<div class="test">
   <input type="radio" class="rad" name="rad" />
   <div>hello1</div>
</div>

CSS 

 .test input:checked ~ div {
    color: #3498DB !important;
 }

This is working fine in desktop browsers and also with user-agent but when I test it on Android devices it is not working. Tested version in Android 4.0+. Someone please tell me how can I fix this?

Note : used onclick instead of ontouchend to post code here

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
redV
  • 684
  • 1
  • 9
  • 26
  • http://stackoverflow.com/questions/15192674/css-sibling-selector-not-working-in-android – Fabrizio Calderan Feb 26 '14 at 11:48
  • @Mr.Alien As per your suggestion I have tried `+` it is working fine in Android 4+ devices. @Fabrizio The code is working fine with Android 4+ devices. I am not sure about 2 and 3 :) – redV Feb 26 '14 at 11:52
  • 1
    @redV Undeleted my answer as I had deleted because I wasn't sure – Mr. Alien Feb 26 '14 at 11:53
  • 1
    @redV, nothing to do with your css but if you can give your radios an id, you can wrap the input and div in a label and then you won't need to use js to check the radio when the wrapper is clicked: http://jsfiddle.net/6y7Jy/ – Pete Feb 26 '14 at 12:00
  • @Pete It is a valid point. But would like to mention that label for will be executed onclick, by the default radio button will be checked after 300ms delay. So, I prefered ontouchend instead of label :) But definitely its valid. – redV Feb 26 '14 at 12:36

2 Answers2

1

Not sure, as I cannot test it live, but if you want, + adjacent selector does the same thing

.test input:checked + div {
    color: #3498DB !important;
}

As far as your example goes, I don't see any valid reason of using ~ because you are not selecting ALL the div elements followed by input tag, it's just one in your case.

Demo

Also, would like to tell you that it's better if you also specify the attribute value using attr=val selector like

.test input[type="radio"]:checked + div {
    color: #3498DB !important;
}
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • 1
    Will check it and update in few minutes. Thanks for the reply. – redV Feb 26 '14 at 11:46
  • 3
    According to [mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked#Browser_compatibility) android does support the :checked pseudo class – Danield Feb 26 '14 at 11:55
  • Any comments for the downvote? I would really like to edit my answer if it's invalid – Mr. Alien Feb 26 '14 at 11:56
  • 1
    +1 Well, this proves sometimes asking a duplicate question helps :) – Mr_Green Feb 26 '14 at 11:57
  • It is a valid answer. My actual requirement is to select all the siblings but it's ok, I can live with immediate sibling selection. – redV Feb 26 '14 at 11:58
  • @redV Not sure, as someone downvoted, but never mind, I just answered keeping the shared markup in mind :) – Mr. Alien Feb 26 '14 at 11:59
  • 1
    @Mr_Green But this page creates a hope that it is working in actual device. In previous question answer says it is not supported and also sibling seldction might be + or ~ :). And I am sory, I was un ware that it was asked already. – redV Feb 26 '14 at 12:00
-1

The :checked pseudo-class is not supported on android devices.

Have a look here : http://quirksmode.org/css/selectors/mobile.html

you can overcome Webkit's pseudo classes + general/adjacent sibling selectors bugs by faking animation on the body element: Check this previus question : Webkit bug with `:hover` and multiple adjacent-sibling selectors

It's a hack but it's a valid solution.

Community
  • 1
  • 1
Vangel Tzo
  • 8,885
  • 3
  • 26
  • 32