CSS nth-of-type selector with nested elements

Question

I have a number of divs of a particular class .box for which I want to set an alternating background color. However, some of the divs are placed inside another div .inner-co

Answer 1

You can still apply an alternating background with CSS only here. Here's a Fiddle of it in action.

There's 2 ways you can do it:

Method 1:

Target the each level of

s directly.

.container > .box:nth-child(even) {
    /* stuff */
}

The method above targets only the first level children of the parent .container. This won't effect the

s inside .inner-container.

To target the

s inside .inner-container separately, we use the same trick again, but start with a different parent container:

.inner-container > .box:nth-child(even) {
    /* stuff */
}

Method 2:

Add a second class for the nested

s and target them that way:

    
a div
    
a div
    
a div
    

        
a nested div
    

0 讨论(0)

查看其它2个回答

发布评论:

提交评论

---

•  加载中...