CODEWITHSUNDEEP
css
Mike Rifgin
Mike Rifgin

Reputation: 10745

Complex css to only select first instance of an element

I need to be able to apply a width to a div but only if any of it's parents have a class of grid.

Obviously the child selector allows me to select an element if it's a direct child of the grid div:

.grid > .test {
    width: 300px;
}

<div class="grid">
    <div class="test"></div>
</div>

I need a selector that allows me to select the .test div even if its not the direct child of grid:

<div class="grid">
    <div class="another">
        <div class="test"></div>
    </div>
</div>

You'd imagine that I could just use a bog-standard selector like:

.grid .test

Problem with this is that I only want to match the first instance of the .test div. The above selector matches all instances even if they're nested. Any subsequent div's with a class of test should be ignored.

<div class="grid">
    <div class="another">
        <div class="test">
            <div class="test"></div> <!-- this should be ignored somehow -->
        </div>
    </div>
</div>

http://jsfiddle.net/hs3G9/1/

Is there any way to do this with css or do I need to resort to JS?

Upvotes: 3

Views: 82

Answers (2)

Jezen Thomas
Jezen Thomas

Reputation: 13800

There isn’t a way of excluding that inner .test element without JavaScript. If the two had been siblings, you could do something like:

.grid .test:first-of-type {}

edit: Right you are; you can cook something up with the :not selector.

Upvotes: 2

Marc Bachmann
Marc Bachmann

Reputation: 113

Using the :first-child selector in css should work.

So for you case: 

<style>
  .grid .test:first-child {
    background-color: rgba(0,0,0,.2);
  }
</style>

<div class="grid">
  <div class="another">
    <div class="test">
        <div class="test"></div> <!-- this should be ignored somehow -->
    </div>
  </div>
</div>

Upvotes: 0

Related Questions