positive lookahead in css

Question

I know in Perl regex the notion of the positive lookahead ie q(?=u) matches a q that is followed by a u, without making the u part of the match. I'm looking for something similar in css: I want to match a div, followed by a sibling div.specialClass.

<div>..</div>  <!-- div to match -->
<div class="specialClass">..</div>

I've played around with + but that matches with div.specialClass, whereas I want the preceding div.

Answer 1

You cannot yet declare which part of the selector is the subject. The subject is always the last element of the selector in CSS, until we get the power to move that, likely using the $ or ! syntax.

// Always selects the .specialClass div which follows another div
div + div.specialClass {
    color: red;
}

In the future, you'll be able to make the first div the subject, likely with the following syntax:

// Selects any `div` preceding any `div.specialClass`
$div + div.specialClass { // or maybe div! + div.specialClass
    color: red;
}

Your only workaround in the interim is to use JavaScript. A tool like jQuery would make this very trivial:

$("div + div.specialClass").prev();

Which is now a reference to all div elements immediately preceding any div.specialClass.

Demo: http://jsfiddle.net/jonathansampson/HLfCr/
Source: http://dev.w3.org/csswg/selectors4/#subject