CODEWITHSUNDEEP
css
user1629366
user1629366

Reputation: 2011

alternate coloring of divs of a repeating html structure via css

<article class="tweet-inner"> 
  <div class="text-wrapper">
    <div class="tweet">
        <div class="text">
            <p>Coming down! Time for Croation BBQ </p>
        </div>

        <p class="last"> 
            <span class="pull-right">
                <small> Hello this is first text </small>
                <small> Hello this is second text </small>
            </span>
        </p>
    </div>
  </div>
</article>

I have the following repeating html structure.

As of now, I want to provide alternate rows with different background. The element which I want to color is class=text

I do the following in my css - 

.tweet-inner .tweet .text-wrapper .text:nth-child(even) {
    background-color: #FF0000;
}

This does not work, I also tried - 

.text:nth-child(even) {
    background-color: #FF0000;
}

This is what works - 

article.text:nth-child(even) {
        background-color: #FF0000;
    }

But I want the .text to be alternately colored, not the entire article. This also does not work.

The fiddle is http://jsfiddle.net/LKqvz/. Please let me know.

Upvotes: 0

Views: 76

Answers (3)

raam86
raam86

Reputation: 6871

try this:

    article:nth-child(even) .tweet .text {
           background-color: #FF0000;
      }

Upvotes: 0

Sachin
Sachin

Reputation: 40970

Try this

article:nth-child(even) .text {
    background-color: red;
}

Js Fiddle

Upvotes: 0

nice ass
nice ass

Reputation: 16719

It should be:

article:nth-child(even) .text{
  ...
}

Because you have multiple article elements with a single .text DIV (your attempts select the nth .text child from article)

Upvotes: 1

Related Questions