Can nth-child be used with this HTML structure?

I have a simplified HTML structure like so:

<div id="container">
    <div class="item">
        <div class="box-header"></div>
        <div class="box-content"></div>
    </div>
    <div class="item">
        <div class="box-header"></div>
        <div class="box-content"></div>
    </div>
    <div class="item">
        <div class="box-header"></div>
        <div class="box-content"></div>
    </div>
    <div class="item">
        <div class="box-header"></div>
        <div class="box-content"></div>
    </div>
    </div>
    <div class="item">
        <div class="box-header"></div>
        <div class="box-content"></div>
    </div>
    <div class="item">
        <div class="box-header"></div>
        <div class="box-content"></div>
    </div>
</div>

My goal is to be able to target the .box-header div's using the nth-child CSS psuedo-selector. However, the following CSS:

#container .box-header:nth-child(3) { background-color: red; }

Doesn't seem to work.

Can nth-child be used with this HTML structure?

Please see this jsFiddle for reference: jsFiddle

Answers


you can use nth-child with class item and assign to its box-header a style

try this:

#container .item:nth-child(3) .box-header{ background-color: red; }

DEMO


container .item:nth-child(n) > .box-header{ background-color: red; }


.item .box-header:first-child {
    background-color: red;
}

Need Your Help

Regex: match word and number with decimal

python regex pattern-matching decimal match

I would like to match words and numbers and drop all special characters unless it's a period between numbers.