Clearfix breaks the :last-child

Question

It's weird but when I use the :last-child to my elements, and then put a clearfix div in the end, it breaks the last-child? Any ideas anyone?

HTML:

<div>
    <a href="#">first child</a>
    <a href="#">second child</a>
    <a href="#">third child</a>
    <a href="#">last/forth child</a>

    <div class="clearfix"></div>
     This is after the clearfix
</div>

CSS:

a{
        display: block;
        margin: 5px;
        color: red;
        width: 80px;
        float: left;
    }

    a:last-child{
        color: blue;
    }

    .clearfix:before, .clearfix:after {
        content: " ";
        display: table;
    }
    .clearfix:after {
    clear: both;
    }

JSFIDDLE

what result you want to achieve? – Kheema Pandey May 02 '14 at 13:30 — Kheema Pandey, May 02 '14 at 13:30
I want to make the last link blue. – Suthan Bala May 02 '14 at 13:39 — Suthan Bala, May 02 '14 at 13:39

laaposto · Accepted Answer · 2014-05-02T13:36:38.343

Yes because that is what last-child selector does. Selects the element that is the last child of its parent.

If you add and another div after your last a this will div be the last child of its parent.

a:last-child{
    color: blue;
}

This selects a elements that are last child of its parent.

In this format:

<div>
    <a href="#">first child</a>
    <a href="#">second child</a>
    <a href="#">third child</a>
    <a href="#">last/forth child</a>

    <div class="clearfix"></div>
     This is after the clearfix
</div>

will not select last a because it is not the last child of its parent div

In the other hand this markup:

<div>
    <a href="#">first child</a>
    <a href="#">second child</a>
    <a href="#">third child</a>
    <div class="clearfix"></div>
    <a href="#">last/forth child</a>


     This is after the clearfix
</div>

will select the last a element.

score 1 · Answer 2 · answered May 02 '14 at 13:36

You have to put your "a" tags in a div

<div>
    <div>
        <a href="#">first child</a>
        <a href="#">second child</a>
        <a href="#">third child</a>
        <a href="#">last/forth child</a>
    </div>
    <div class="clearfix"></div>
        This is after the clearfix
</div>

score 1 · Answer 3 · answered May 02 '14 at 13:38

1

No need to clear it that way. Try to clearfix on a's container.
Fiddle here: http://jsfiddle.net/UBSc3/4/

answered May 02 '14 at 13:38

n1kkou

3,096
2
21
32

Clearfix breaks the :last-child

3 Answers3