Question

I’m trying to apply some CSS to the last .topic-wrapper div (which is inside the entry-content div):

<div class="entry-content">

 <div class="bbp-pagination">
 <h2 class="dark-title">Top Topics</h2>
 <div class="topic-wrapper">
 <h4></h4>
 <div class="topic-wrapper">
 <h4></h4>
 <div class="topic-wrapper"> <!-- I'm trying to get this one -->
 <h4></h4>
 <div class="mainbar">
 <div class="bbp-pagination">

with this code: .entry-content div:last-child

But it seems like the CSS is being applied to some divs inside .topic-wrapper.

Like:

<div class="topic-wrapper">
<div class="topic-left">
<h2>
<span>
<span class="bbp-topic-started-in">
<div class="bbp-topic-tags"> <!-- this one -->
<p>

Any suggestions to solve this?

</div>

Answer 1

This should do it, using “>” gets you just the direct descendents:

.entry-content > div:last-child

Here is an example:

<div class="container">
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="outer">
    </div>
    <div class="outer">
    </div>
     <div class="outer">
    </div>
</div>



.container
{
    width:300px;

    background-color:yellow;
}

.outer
{
    width:100px;
    height:100px;
    background-color:red;
    margin:20px;
}

.inner
{
    width:50px;
    height:50px;
    background-color:pink;
    margin:5px;
}



.container > div:last-child
{
    background-color:blue;
}

/* uncomment this statement to see the alternative broken version*/
/*
.container div:last-child
{
    background-color:green;
}

*/

You can view the example on jsfiddle