CSS - Sibling Selector Not Working in Android

CSS - Sibling selector not working in android?

http://quirksmode.org/css/selectors/mobile.html

The sibling selector is supported

the :checked pseudo-class is not

~ selector not working in Android

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;
}

Why does the general-sibling combinator allow toggling pseudo-element's content, but not the adjacent-sibling?

This is a long-standing bug in WebKit browsers related to the use of certain dynamic pseudo-classes with next-sibling combinators. This happens whether you're applying styles to the sibling element itself or a pseudo-element of that sibling element.

I don't know if anybody has filed a bug report yet, but this has been seen rather frequently on the site:

• Webkit bug with `:hover` and multiple adjacent-sibling selectors
• CSS adjacent sibling selectors, Safari and <nav> elements

Strangely it was also reported that Chrome had issues with the general sibling combinator, but as you note it works in your given scenario:

• Why doesn't this CSS selector work: a:hover ~ span?

So either that was fixed, or something else triggers/triggered it.

Webkit bug with `:hover` and multiple adjacent-sibling selectors

you can overcome Webkit's pseudo classes + general/adjacent sibling selectors bugs by faking animation on the body element:

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix { 
  from { padding: 0; } 
  to { padding: 0; } 
}

you can check it out here: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

How do I modify properties of siblings with CSS selectors like :focus?

Like stefmikhail said, the space in your selector means #searchsub is inside #s. As far as HTML is concerned, though, that is obviously wrong because input fields are empty elements and you can't have other elements inside them.

You want to use the adjacent sibling selector + instead, since #searchsub is the sibling that comes after #s:

#s:focus + #searchsub
{
    color:#cccccc;
}

Adjacent sibling selectors not working in Mozilla Firefox 39.0.3

Here is a reply from Tooru Fujisawa:

---

This won't be a spec issue nor a Firefox's bug.

I believe Firefox 38+'s behavior matches to what the spec says.

https://html.spec.whatwg.org/multipage/forms.html#the-label-element:the-label-element-10

The activation behaviour of a label element for events targeted at
interactive content descendants of a label element, and any descendants of
those interactive content descendants, must be to do nothing.

https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2

Interactive content is content that is specifically intended for user interaction.
a, audio (if the controls attribute is present), button, ...

When you click a button inside a label, the label's activation behavior must be "to do nothing" because the button is an interactive content, it means that we should think that user want to activate the button, instead of the enclosing label, so it won't change the checkbox's state by clicking the button.

I think you could use non-interactive content instead of the button (not sure if it's good for a11y tho), or just unhide the checkbox and use it instead of the button.

---

see full bug report: bugzilla.mozilla.org/show_bug.cgi?id=1197770

CSS/SCSS Adjacent sibling selector between certain types

In compliant browsers (sigh...), there's the option of using:

:matches(a, b, span) + :matches(a, b, span):nth-child(2) {
  color: #f90;
}

To style the :nth-child(2) element that is an <a>, <b> or <span> element following a previous sibling element of the type <a>, <b> or <span>.

The problem, of course, is that "in compliant browsers" part, and so far IE and Edge are both reluctant to join that particular party. Also, Webkit (Chrome, Opera and Android) are implementing a vendor-prefixed incorrect version using :-webkit-any(). On the plus side, though, as I write now, Safari, both desktop and iOS implement the :matches() pseudo-class correctly.

So, if you don't require IE/Edge support you have the option of:

:-webkit-any(a, b, span) + :-webkit-any(a, b, span):nth-child(2) {
  color: #f90;
}
:-moz-any(a, b, span) + :-moz-any(a, b, span):nth-child(2) {
  color: #f90;
}
:matches(a, b, span) + :matches(a, b, span):nth-child(2) {
  color: #f90;
}

a::before {

  content: 'link';

}

b::before {

  content: 'bold'

}

span::before {

  content: 'span';

}

em::before {

  content: 'em';

}

:-webkit-any(a,

b,

span) +:-webkit-any(a,

b,

span):nth-child(2) {

  color: #f90;

}

:-moz-any(a,

b,

span) +:-moz-any(a,

b,

span):nth-child(2) {

  color: #f90;

}

:matches(a,

b,

span) +:matches(a,

b,

span):nth-child(2) {

  color: #f90;

}

<div>

  <a href="#"></a> <span></span>

</div>

<div><span></span>

  <a href="#"></a>

</div>

<div><b></b>  <span></span>

</div>

<div><b></b>

  <a href="#"></a>

</div>

<div><b></b>  <em></em>

</div>

<div><em></em>

  <a href="#"></a>

</div>

jquery siblings() without selector not working

Your <td>'s are cousins, not siblings. The td's parents (the <tr>'s) are siblings. You could modify the jquery like this...

http://jsfiddle.net/superuntitled/fb4g7/

    $(document).ready(function(){
        $(".schedules tr").click(function(){
            $(this).find('td').css("background-color","blue")
            $(this).siblings().find('td').css("background-color","white");         
        });
    }); 

---

Related Topics