CODEWITHSUNDEEP
jqueryhtmlcss
Tierendu
Tierendu

Reputation: 29

Selecting every other parent’s child

I have an HTML template like this:

<div id = "container">

   <div class = "status">
      <div class ="dynamic"></div>
   </div>

   <div class = "status">
      <div class ="dynamic"></div>
   </div>

   <div class = "status">
      <div class ="dynamic"></div>
   </div>

   <div class = "status">
      <div class ="dynamic"></div>
   </div>

</div>

Is there way to change the background of every other .status's .dynamic, using CSS or jQuery?

Upvotes: 0

Views: 75

Answers (3)

Ry-
Ry-

Reputation: 224942

You could do this in pure CSS:

#container > .status:nth-child(2n+1) > .dynamic {
    /* Change the background */
}

(Here’s a demo!)

Upvotes: 2

Alan
Alan

Reputation: 178

This can be done through CSS:

#container > .status:nth-child(2n) > .dynamic { background: whatever-you-want; }

or

#container > .status:nth-child(2n+1) > .dynamic { background: whatever-you-want; }

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$('.status:odd .dynamic').css('color', 'blue')

or

$('.dynamic:even').css('color', 'blue')

Demo: fiddle

Upvotes: 0

Related Questions