CODEWITHSUNDEEP
css
fakeguybrushthreepwood
fakeguybrushthreepwood

Reputation: 3083

Change the background of a named <div> inside the 9th identically named <section>

I am trying to change the background from blue to red, but my code doesn't seem to target inside the 9th div. This is what I have tried so far (By the way in my real version of this script there is code in each tab, but I am showing a basic example here to simplify things).

CSS:

.bg-layer {
    height: 100px;
    background-color: blue;
}

.bg-layer .vc_section_wrapper:nth-child(9) {  
    background-color: red;
}

HTML:

<div class="entry-content">
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color"></section>
    <section class="vc_section_wrapper has_bg_color">
    <div class="bg-layer"></div>
    </section>
</div>

Upvotes: 0

Views: 44

Answers (2)

Sowmya
Sowmya

Reputation: 26969

You need to point class name after the section pseudo selection.

.vc_section_wrapper:nth-child(9) .bg-layer{  
background-color: red;
}

DEMO

Upvotes: 1

NoobEditor
NoobEditor

Reputation: 15901

Your markup has exactly 9 sections....they why go for :nth-child()..instead go for :last-child

div.entry-content :last-child {
    background-color: red;
    height:10px;
    border:1px solid red;
}

working demo

Upvotes: 1

Related Questions