CODEWITHSUNDEEP
htmlcsscss-selectors
Patrick
Patrick

Reputation: 909

Selector :nth-child without a break?

i have this example html code.

<table>
    <tbody>
        <tr class="test"><td>Test</td></tr>
        <tr><td></td></tr>
        <tr class="test"><td>Test</td></tr>
        <tr class="test"><td>Test</td></tr>
    </tbody>
</table>

And my css code is following:

table tbody tr.test:nth-child(2n+1) {
    background-color: #ff00ff;
}

And the output is a wrong :(

It seems that there is a break with the tr with no class. *Why!?*

Look at jsfiddle.net: http://jsfiddle.net/Bubelbub/rFddk/

Thank you in Advance!

Upvotes: 0

Views: 100

Answers (1)

BoltClock
BoltClock

Reputation: 724222

No, on the contrary, the tr with no class doesn't affect :nth-child(): it can never be "broken" in that sense. If this element is the nth child of its parent, then it's the nth child, no matter what class it has/doesn't have or what element type it is, etc. The presence of .test in the selector simply means "this element must have the class to match". Since that element doesn't have the class then the rule doesn't get applied, simple as that.

Upvotes: 1

Related Questions