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.