CODEWITHSUNDEEP
css
peckinpah
peckinpah

Reputation: 5

Alternating row colors with CSS will not work inside another

Why is this? Both blockquotes are blue. The TR's do alternate in color, but the blockquotes will not. How come?

<tr>
    <blockquote>Hello</blockquote>
</tr>

<tr>
    <blockquote>Hello</blockquote>
</tr>



tr:nth-child(even){ background-color: #272727; }
tr:nth-child(odd) { background-color: #222222; }

blockquote:nth-child(even){ background-color: red; }
blockquote:nth-child(odd) { background-color: blue; }

Upvotes: 0

Views: 66

Answers (2)

j08691
j08691

Reputation: 207861

Use nth-of-type instead:

tr:nth-of-type(even) {
    background-color: #272727;
}
tr:nth-of-type(odd) {
    background-color: #222222;
}
tr:nth-of-type(even) blockquote {
    background-color: red;
}
tr:nth-of-type(odd) blockquote {
    background-color: blue;
}

jsFiddle example (colors changed for visibility)

Upvotes: 2

Fallenreaper
Fallenreaper

Reputation: 10682

Both block quotes are the 1st element of their respective parents, which is odd... Therefore: blockquote:nth-child(odd) is true.

Upvotes: 0

Related Questions