CODEWITHSUNDEEP
htmlcss
Learning
Learning

Reputation: 20001

I need to change background of the last nested element using css

I want to change the background color of last nested element. I am using following css but it is not working 

.cd-timeline > .year-wrapper > .cd-timeline-block:last-of-type{ 
    background-color:red;
}

i also tried 

#cd-timeline .year-wrapper  .cd-timeline-block:last-of-type{ 
    background-color:red;
}

What am i doing wrong can we use last-of-type element with class

Fiddle http://fiddle.jshell.net/shfh0x63/2/

<div class="timeline-wrapper">
    <div class="cd-container" id="cd-timeline">
        <div class="year-wrapper">
            <div class="cd-timeline-block">1</div>
            <div class="cd-timeline-block">2</div>
            <div class="cd-timeline-block">3</div>
        </div>
        <div class="year-wrapper">
            <div class="cd-timeline-block">4</div>
            <div class="cd-timeline-block">5</div>
        </div>
        <div class="year-wrapper">
            <div class="cd-timeline-block">6</div>
            <div class="cd-timeline-block">7</div>
            <div class="cd-timeline-block">8</div>
            <div class="cd-timeline-block">change background color of this only</div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 64

Answers (2)

user4639281
user4639281

Reputation:

This is the easiest way of doing it using :last-child

(Demo)

.year-wrapper:last-child .cd-timeline-block:last-child {
    background-color: red;
}

Upvotes: 1

pavel
pavel

Reputation: 27092

You have use undefined selector (.cd-timeline instead of #cd-timeline - in HTML you have ID, not class). Then you need to add last-of-type to .year-wrapper too

#cd-timeline > .year-wrapper:last-of-type > .cd-timeline-block:last-of-type{ background-color:red;}
^                           ^^^^^^^^^^^^^

http://fiddle.jshell.net/shfh0x63/3/

Upvotes: 2

Related Questions