CODEWITHSUNDEEP
htmlcss
Web Develop Wolf
Web Develop Wolf

Reputation: 6316

:last-child property not applied to element

I have a navigation layed out as follows:

<div id=treeLevelContainer_0>
     <div class=treeLevel_0><a href="#">Link 1</a></div>
     <div class=treeLevel_0><a href="#">Link 2</a></div>
     <div class=treeLevel_0><a href="#">Link 3</a></div>
     <div class=treeLevel_0><a href="#">Link 4</a></div>
     <div class=treeLevel_0><a href="#">Link 5</a></div>
     <div class=treeLevel_0><a href="#">Link 6</a></div>
     <div class=treeLevel_0><a href="#">Link 7</a></div>
</div>

And for each of these I have the following CSS:

.treeLevel_0
{
    width:98%;
    height:24px;
    line-height:24px;
    background:#FFF url(/Images/nav-divider.jpg) no-repeat bottom;
    text-align:left;
    cursor:pointer;
    margin:5px;
    padding-bottom:3px;
}

However for the last one I don't want to have the background so I'm using the :last-child property:

#treeLevelContainer_0 .treeLevel_0:last-child
{
    background:none;
}

Yet for reason the :last-child is not being applied at all. Any ideas at all because I'm sure this is the way I've done this in the past?

Upvotes: 0

Views: 89

Answers (3)

Žarko Selak
Žarko Selak

Reputation: 1131

http://jsfiddle.net/P9Cvc/

<div id=treeLevelContainer_0>
<div><a href="#">Link 1</a></div>
<div><a href="#">Link 2</a></div>
<div><a href="#">Link 3</a></div>
<div><a href="#">Link 4</a></div>
<div><a href="#">Link 5</a></div>
<div><a href="#">Link 6</a></div>
<div><a href="#">Link 7</a></div>
</div>

#treeLevelContainer_0 div
{
    width:98%;
    height:24px;
    line-height:24px;
    background:red;
    text-align:left;
    cursor:pointer;
    margin:5px;
    padding-bottom:3px;
}
#treeLevelContainer_0 div:last-child
{
    background:none;
}

this is solution ...btw it is better to do it with jQuery coz crosbroswer compatibility.

Upvotes: 1

Bipin Kumar Pal
Bipin Kumar Pal

Reputation: 1017

#treeLevelContainer_0 .treeLevel_0:last-child{background-image:none;}

Upvotes: 1

Marcel
Marcel

Reputation: 683

Replace each of these malformatted lines as follows:

<div class="treeLevel_0"><a href="#">Link 2</a></div>

This should work. Also, don't forget to put all IDs or classes within quotation marks (see your first line)

Upvotes: 1

Related Questions