CODEWITHSUNDEEP
htmlcsscss-selectors
lala
lala

Reputation: 2082

How do you make nth-child work with descendant selectors?

I have this code.

    <div class="myDiv">
      <div>
        I want to be red.
      </div>
    </div>

    <p>I'm some other content on the page</p>

    <div class="myDiv">
      <div>
        I want to be blue.
      </div>
    </div>

   .myDiv div:nth-child(odd) {
      color: red;
   }

   .myDiv div:nth-child(even) {
      color: blue;
   }

I see why it's not working. It's making every odd div within myDiv be red. What I want it to do is make every odd example of a div within myDiv be red. How can I write that?

Here's a JSFiddle.

Upvotes: 6

Views: 5244

Answers (4)

user2284570
user2284570

Reputation: 3060

Just applynth-childto the first member of the descendant selector, not the last one.

div:nth-of-type(odd) > div {
  color: red;
}
div:nth-of-type(even) > div {
  color: blue;
}
<div class="myDiv">
  <div>
    I want to be red.
  </div>
</div>

<p>I'm some other content on the page</p>

<div class="myDiv">
  <div>
    I want to be blue.
  </div>
</div>

Upvotes: -2

Domenic
Domenic

Reputation: 112827

This is not possible. There is no CSS selector that will do what you want, as you can see by perusing the complete list of selectors.

In general CSS selectors do not "reach out" to encompass elements above the DOM tree of the one selected. You are asking for something even more sophisticated than that, combining characteristics of parent elements with ordinal properties of the targeted elements, even though those targeted elements are distributed among entirely different places in the DOM tree.

Upvotes: 5

Explosion Pills
Explosion Pills

Reputation: 191749

There are a couple of problems here. The :nth-child is on the wrong element. The inner divs are always the first child, so the :nth-child(odd) selector works for both. Instead move to

.myDiv:nth-child(odd) div

...however this does not work either because of the <p>. A working solution with your sample is

.myDiv:nth-of-type(odd) div

http://jsfiddle.net/tvKRL/1/

NOTE that the nth-of-type only works because the .myDiv elements are all divs (it's based on the element, not the selector), so the selector ignores the <p>. If there can be another div between .myDivs I don't think any CSS will work for what you want to do.

Upvotes: 9

BoltClock
BoltClock

Reputation: 723628

You can't do this generically, for the reason given by Domenic. To put it simply: there's no selector that lets you filter an existing subset of matched elements.

On the off chance that among your p and div.myDiv siblings the only div elements are the ones with that class anyway, then you could use :nth-of-type() to have it look at those intermediate divs only:

div.myDiv:nth-of-type(odd) div {
    color: red;
}

div.myDiv:nth-of-type(even) div {
    color: blue;
}

Or if there are other divs without that class which should be excluded, then unless there is some sort of pattern in which they're laid out, you're out of luck.

Upvotes: 6

Related Questions