CODEWITHSUNDEEP
cssclasshtml
user2655708
user2655708

Reputation: 1

last-child for class not working

<div class='container'>
    <div class='item'>
        <div class='date'>
            <a></a>
        </div>
        <div class='work'>
            <a></a>
        </div>
        <div class='info'>
            <a>$row[info]</a>
        </div>
    </div>
   <div id="footer">
  </div>
</div>

I have border-bottom for class info:

.info {padding-bottom: 10px;  border-bottom: 1px dashed #C8C8C8;}

But I dont want border for last child but it is not working. All borders disappears.

.info:last-child {border-bottom: none;}

Why is that? And what is the best solution?

Upvotes: 0

Views: 155

Answers (2)

Gerico
Gerico

Reputation: 5169

I am not sure what you're trying to achieve? Your trying to apply :last-child when you've only got one child to target, therefore it will not appear.

It would work if there were more than one .info

See here: http://jsfiddle.net/ELk4E/ - In the fiddle I've replicated div.info three times, and the 3rd and last has the border-bottom removed via the :last-child

However, if you have div.info on your page several times but within different parents, this will not work. Such as:

<div class='container'> <!-- parent 1 -->
    <div class='item'>
        <div class='date'>
            <a></a>
        </div>
        <div class='work'>
            <a></a>
        </div>
        <div class='info'>
            <a>Last Child</a>
        </div>
    </div>
   <div id="footer">
  </div>
</div>

<div class='container'><!-- parent 2 -->
    <div class='item'>
        <div class='date'>
            <a></a>
        </div>
        <div class='work'>
            <a></a>
        </div>
        <div class='info'>
            <a>Last Child</a>
        </div>
    </div>
   <div id="footer">
  </div>
</div>

In this example you could use the following CSS to remove the border-bottom of the last container's div.info:

.info {padding-bottom: 10px;  border-bottom: 1px dashed #C8C8C8;}
.container:last-of-type .info {border-bottom: none;}

Basically the :last-child selector matches every element that is the last child of its parent. See here: http://www.w3schools.com/cssref/sel_last-child.asp

Upvotes: 3

vinothvetrivel
vinothvetrivel

Reputation: 109

Try this one

.info:last-child {border-bottom: none; !important}

Upvotes: -1

Related Questions