Bug 45168 - CSS multiple adjacent sibling selector sequence is ignored if prefixed with a pseudo-class selector
: CSS multiple adjacent sibling selector sequence is ignored if prefixed with a...
Product: WebKit
Classification: Unclassified
Component: CSS
: 528+ (Nightly build)
: PC Linux
: P2 Normal
Assigned To: Nobody
Depends on:
  Show dependency treegraph
Reported: 2010-09-03 02:49 PDT by Pierre Mazière
Modified: 2013-07-11 04:39 PDT (History)
5 users (show)

See Also:

Test case (1.42 KB, text/html)
2010-09-03 02:49 PDT, Pierre Mazière
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Pierre Mazière 2010-09-03 02:49:18 PDT
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
Comment 1 Maël Nison 2012-03-26 05:00:49 PDT

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
Comment 2 Binyamin 2012-04-21 23:20:46 PDT
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/
Comment 3 Binyamin 2012-05-17 13:00:44 PDT
It is still not fixed on Chrome 21.0.1139.2 canary and works fine on Firefox 12.0
Comment 4 Frederik 2013-05-05 11:03:14 PDT
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>
Comment 5 Binyamin 2013-05-08 22:14:30 PDT
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.