Bug 45168 – CSS multiple adjacent sibling selector sequence is ignored if prefixed with a pseudo-class selector

• Status: UNCONFIRMED
• Component: CSS

[Pierre Mazière]

Created attachment 66479 [details]
Test case

The following selector is not matched as it should:
 div.a:hover + div.b + div.c {background-color: yellow;}
EXPECTED: when the mouse is dragged over the div.a element, div.c background should change from white to yellow
OBSERVED: when the mouse is dragged over the div.a element, nothing happens

if the :hover pseudo-class, the selector is now:
 div.a + div.b + div.c {background-color: yellow;}
EXPECTED: div.c background is yellow
OBSERVED: div.c background is yellow

I have tested this whith several pseudo-classes: 
 :hover with DIV and A 
 :active and :focus with A
 :checked with input[type=radio]

WebKit nightly build (2010/09/01) always shows the wrong behaviour, ignoring the adjacent sibling selector sequence
Firefox 3.6.8 and Chromium 5 display the XHTML/CSS as expected by the W3C CSS specs

[Maël Nison]

Bump.

I've tried[1] with 17.0.963.83 m and 19.0.1080.0 canary.

The animation hack[2] works, but it make screen blink in some cases.

[1] http://jsfiddle.net/W7L7M/1/
[2] http://css-tricks.com/webkit-sibling-bug

[Binyamin]

The CSS hack 

     body { -webkit-animation: bugfix infinite 1s; }
     @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

applies like an issue on Chrome 18.0.1025.162 m, but doe not work on Chrome 20.0.1112.0 canary.

Demo http://jsfiddle.net/W7L7M/3/

[Binyamin]

It is still not fixed on Chrome 21.0.1139.2 canary and works fine on Firefox 12.0

[Frederik]

still not fixed in Version 26.0.1410.63

here's some minimal code to try:

<style>.a:checked + .b{background:yellow;}</style>
<input type="checkbox" class="a"><span class="b">b</span>

[Binyamin]

The CSS hack

    html {
        -webkit-animation: issueSelector infinite 1s;
    }
    @-webkit-keyframes issueSelector {
        0% {
            display: block;
        }
        100% {
            display: block;
        }
    }

cases Android filckers, since it enables GPU acceleration by repainting html.