:last-child pseudo class confusion

Question

In this JSFiddle, the last .tab class doesn't get the correct border-radius effect (top right rounded corner).

I think I have my logic correct in saying :last-child selects the last .tab of .tabbed in this case.

What am I doing wrong?

CSS:

body {
    background: black;
    color: white;
    padding: 5px; }

.tabbed {
    height: 550px;
}

.tabbed .tab {
    padding: 6px 14px;
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 0px;
    border-left-width: 0;
    float: left;
}

.tabbed .tab:first-child {
    border-radius: 3px 0 0 0;
    border-left-width: 1px;
}

.tabbed .tab:last-child {
    border-radius: 0 3px 0 0;
}

HTML:

<ul class='tabbed'>
    <li class='tab'>Menu 1</li>
    <li class='tab'>Menu 2</li>
    <li class='tab'>Menu 3</li>
    <li class='tab'>Menu 4</li>
    <li class='tab'>Menu 5</li>
    <li> <br/><br/> </li>
    <li class='dummy'>Content 1</li>
    <li class='dummy'>Content 2</li>
    <li class='dummy'>Content 3</li>
    <li class='dummy'>Content 4</li>
    <li class='dummy'>Content 5</li>
</ul>

Answer 1

According to this documentation:

The :first-child pseudo class means "if this element is the first child of its parent". :last-child means "if this element is the last child of its parent". Note that only element nodes (HTML tags) count, these pseudo-classes ignore text nodes.

See also W3C doc

It is not applied in your case because the last .tab is not the last child of the parent ul.

If you create two lists, then the css is applied as expected.