nth-child selector not working with Wordpress theme

Question

My goal here is to have each of the boxes (which are testimonial boxes on the live site) have a different color background. Since it's a Wordpress site, I can't go in and give each box a different id, so I'd like to use the nth-child() selector.

I've tried to select the container div and the first box within that container with

.row multi-columns-row kwayy-items-wrapper:nth-child(1) .contarea {
    background-color:#555;
}

But that isn't doing anything.

Here's a fiddle.

HTML:

    <div class="row multi-columns-row kwayy-items-wrapper">
    <div class=
    "kwayy-testimonial-box col-lg-4 col-sm-6 col-md-4 col-xs-12">
        <div class="kwayy-testimonial-data">
            <blockquote class="kwayy-testimonial-text">
                <div class="contarea">
                    <div class="kwayy-tst-contarea-text">
                        <h2 style="text-align: center;">one</h2>

                        <h4>first box</h4>Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit.
                    </div>
                </div>

                <footer>
                    <span class=
                    "kwayy-testimonial-icon kwicon-fa-quote-left" style=
                    "font-style: italic"></span> <cite class=
                    "kwayy-testimonial-title"></cite>
                </footer>
            </blockquote>
        </div>
    </div>

    <div class=
    "kwayy-testimonial-box col-lg-4 col-sm-6 col-md-4 col-xs-12">
        <div class="kwayy-testimonial-data">
            <blockquote class="kwayy-testimonial-text">
                <div class="contarea">
                    <div class="kwayy-tst-contarea-text">
                        <h2 style="text-align: center;">two</h2>

                        <h4>second box</h4>Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit.
                    </div>
                </div>

                <footer>
                    <span class=
                    "kwayy-testimonial-icon kwicon-fa-quote-left" style=
                    "font-style: italic"></span> <cite class=
                    "kwayy-testimonial-title"></cite>
                </footer>
            </blockquote>
        </div>
    </div>

    <div class=
    "kwayy-testimonial-box col-lg-4 col-sm-6 col-md-4 col-xs-12">
        <div class="kwayy-testimonial-data">
            <blockquote class="kwayy-testimonial-text">
                <div class="contarea">
                    <div class="kwayy-tst-contarea-text">
                        <h2 style="text-align: center;">three</h2>

                        <h4>third box</h4>Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit.
                    </div>
                </div>

                <footer>
                    <span class=
                    "kwayy-testimonial-icon kwicon-fa-quote-left" style=
                    "font-style: italic"></span> <cite class=
                    "kwayy-testimonial-title"></cite>
                </footer>
            </blockquote>
        </div>
    </div>
</div>

CSS:

.row multi-columns-row kwayy-items-wrapper:nth-child(1) .contarea {
background-color:#555;

}

Thank you.

If you remove `nth-child` you'll see that your selector still matches nothing. The issue isn't with `nth-child` but rather the rest of the css selector. — James Montagne, Mar 12 '15 at 17:02

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

You're looking for nth-child of .kwayy-testimonial-box

.kwayy-testimonial-box:nth-child(1) .contarea {
    background-color:#555;
}

Demo

Or at least something like this

.row.multi-columns-row.kwayy-items-wrapper .kwayy-testimonial-box:nth-child(1) .contarea {
    background-color:#555;
}

You have to do a multiple select

You also have problems in the selector. You forgot the class selector .

edited May 23 '17 at 12:12

Community

1
1

answered Mar 12 '15 at 16:59

Dhiraj

33,140
10
61
78

1

Perfect, thank you! I had selected the classes as they were listed in the inspector for those elements, but it looks like that is by no means a fool proof method. – redleaf Mar 12 '15 at 17:12

score 1 · Answer 2 · answered Mar 12 '15 at 17:00

1

You have an error while defining your selectors. It should be rather:

.row.multi-columns-row.kwayy-items-wrapper:nth-child(1) .contarea {
    background-color:#555;
}

Check the fiddle

answered Mar 12 '15 at 17:00

Grzegorz Pawlik

2,198
1
18
18

score 1 · Answer 3 · answered Mar 12 '15 at 17:00

The classes multi-columns-row and kwayy-items-wrapper are applied to the same element.

You're also missing . in your CSS for those classes.

Change:

.row multi-columns-row kwayy-items-wrapper:nth-child(1)

To:

.row.multi-columns-row.kwayy-items-wrapper:nth-child(1)

This is still a poor formation of a selector but it will work in the way you intend it to.

nth-child selector not working with Wordpress theme

3 Answers3