: the confusion of the last child's pseudo-class

Question

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

I think I have the correct logic, saying that :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

In a comment, you indicate: "It must be on the same explicit parent. Or another ul, below the last li on the first ul." If so, do the following:

 <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 script .

Answer 2

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) are counted; these pseudo-classes ignore text nodes.

See also W3C doc

It does not apply in your case, because the last .tab not the last child of the parent ul.

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

Answer 3

To expand Didier G.'s answer , what you really should use here is :first-of-type and :last-of-type pseudo :last-of-type selectors. However, the :nth-of-type selector (and its similar abridged versions) does not seem to support using the class name for searches, but only a choice, for example. the following will select the first child element of .tabbed , if and only if it has a .tab class:

 .tabbed .tab:first-of-type 

whereas this will select the first child .tabbed element that is of type li :

 .tabbed li:first-of-type 

I cannot find any link explicitly indicating this behavior, but it is vaguely implied in the specification :

Pseudotherapy designation :nth-of-type(an+b) is an element in which an+b-1 siblings with the same extended element name

If the name of the extended element is a tag name and cannot be a class or identifier selector.

You can see this behavior live on JSFiddle .

Answer 4

Here's how I 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 since I find it impractical to include content in 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 -->