CSS to select nearest descendent?

Question

Using CSS, is there any way to select an element's nearest descendent that matches a certain selector?

<div class="foo"> <!-- if we're inside this -->
  <div>
    <br />
    <div class="bar"> <!-- match this -->
      <div class="bar"> <!-- but not this -->
        <div class="bar"> <!-- or this -->
        </div>
      </div>
    </div>
    <div class="bar"> <!-- I don't really care whether we match this -->
    </div>
  </div>
</div>

That is, something that would select the first .bar within any .foo (no matter how many child or sibling elements are in between), but not the second or third .bar.

Answer 1

Here's my hacktastic answer: http://jsfiddle.net/thirtydot/gqJdP/2/

/*repeat for as many levels as there could be*/
.foo > .bar,
.foo > :not(.bar) > .bar,
.foo > :not(.bar) > :not(.bar) > .bar {
    border-color: blue;
}
.bar {
    border: 1px solid red;
    padding: 10px;
}

Quoting myself from a comment:

My suggestion is viable, although distasteful, if you can place an upper limit on the possible number of parents between .foo and the .bar you want to match. Even if you had to repeat the selector (let's say) 10 times, it's not too bad.

Answer 2

No, there is no way to do what you are asking for completely using only CSS. You can select the nth-child or nth-of-type, but not the-nth-item-matching-this-selector.

As "proof", review the list of CSS3 selectors available (which covers all the capabilities of CSS1 and CSS2.1):
http://www.w3.org/TR/selectors/

You will need to use JavaScript (on the client) or server-side manipulation (e.g. annotating the first such item with a special class).

---

Edit: Based on your edit, you can do:

.foo .bar      { font-weight:bold; color:red }
.foo .bar .bar { font-weight:normal; color:black }

i.e. you need to explicitly "undo" the styling applied on ancestors that would be inherited. This is "fragile"—if you change a style on an ancestor you need to be sure to also change the value on the corresponding "override" rule—but effective.

And, if @thirtydot posts his hack as an answer, we can all accept that, too.

Although it probably does not help, note also that you can accomplish this goal with XPath.