如何使用：nth-​​child将背景应用于无序列表？

Question

I am creating an UL and trying to apply a background-color to every other row using :nth-child(2n+1) Each row is basically a sub-item to the main UL, yet I have been able to apply a style to each UL (perhaps the sub-items within the nested UL are interfering). I've tried almost every combination imaginable, what am I missing? Noy Hadar

<style>
#data {
    width: 100%;
    list-style: none;
}
#data li ul {
    list-style: none;
    float: left;
    width: 100%;
    background: #FFC;
}
#data li ul:nth-child(2n+1) {
    background: #3F6;
    font-weight: bold;
}
#data li ul li {
    display: block;
    float: left;
    width: 10%;
    line-height: 24px;
}
</style>


<ul id="data">
        <li>
            <ul>
                <li>Closed Date</li>
                <li>Price</li>
                <li>DOM</li>
                <li>Address</li>
                <li>Price Change</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Closed Date</li>
                <li>Price</li>
                <li>DOM</li>
                <li>Address</li>
                <li>Price Change</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Closed Date</li>
                <li>Price</li>
                <li>DOM</li>
                <li>Address</li>
                <li>Price Change</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Closed Date</li>
                <li>Price</li>
                <li>DOM</li>
                <li>Address</li>
                <li>Price Change</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Closed Date</li>
                <li>Price</li>
                <li>DOM</li>
                <li>Address</li>
                <li>Price Change</li>
            </ul>
        </li>
</ul>

Answer 1

You need to target the li elements not the ul so:

#data li ul li:nth-child(2n+1) {
    background: #3F6;
    font-weight: bold;
}

Answer 2

Try this:

table.stripedTable {
background-color: #222;
    color: #fff;
}
    .stripedTable tr:nth-child(2n) {
        background-color: #EEE;
        color: #222;
    }

And the HTML:

<table id="table" class="stripedTable">
        <tr id="Row 1">     
                    <td>Row 1</td>
            <td id="Cell 1">Hi
            </td>
        </tr>
        <tr id="Row 2">
                <td>Row 2</td>
                <td id="Cell 2">Cell 2</td>
            </tr>
            <tr id="Row 3">
                <td>Row 3</td>
                <td id="Cell 3">Cell 3</td>
            </tr>
            <tr id="Row 4">
                <td>Row 4</td>
                <td id="Cell 4">Cell 4</td>
            </tr>
</table>

Answer 3

I see the problem, here's a jsFiddle fixing it. I'll explain.

#data li ul:nth-child(2n+1) {
    background: #3F6;
    font-weight: bold;
}

What this is doing is selecting the ul element that is the nth-child of the li , your structure only has one ul after the li so it's the only one being selected, which is why your entire table is green.

here's what i changed it to:

#data li:nth-child(2n+1) ul {
    background: #3F6;
    font-weight: bold;
}

now we're selecting the li (that contains the ul ) that is the nth-child of the #data container, and then we're styling the ul that is in that li , so we're selecting every other row and then styling it.

Hope this helps!