:last-child pseudo class confusion - css

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.

Answer 2

In a comment, you state: "It needs to be on the same ul parent. Or another ul, below the last li on the first ul." If that is so, then do this:
<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>
<ul>
<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>
</li>
</ul>
Then this css (with modern browsers):
.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:nth-last-child(2) {
border-radius: 0 3px 0 0; }
.tabbed li:last-child {
clear: left;
}
See this fiddle.

Answer 3

To expand on Didier G.'s answer, what you should really be using here is the :first-of-type & :last-of-type pseudo selectors. However, the :nth-of-type selector (and its similar shorthand versions) does not appear to support using a classname for searching, only selecting, e.g. the following will select the first child of .tabbed, if and only if it has the class .tab:
.tabbed .tab:first-of-type
whereas this will select the first child of .tabbed that is of type li:
.tabbed li:first-of-type
I cannot find any reference explicitly stating this behavior, but it is vaguely implied in the specification:
The :nth-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name
Where an expanded element name is the tag name, and cannot be a class or ID selector.
You can see this behavior live on JSFiddle.

Answer 4

Here's how i would do it:
body {
background: black;
color: white;
padding: 5px; }
.content {clear:both;}
.tall {
height: 550px;
}
.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
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; }
And because i think it seems inappropriate to include the content within a class called tabbed, change the HTML to be structured as:
<div class="tall">
<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>
</ul>
<ul class="content">
<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>
</div>
<hr/><!-- just here to show you the height remains -->