Last-child pseudo class for list not working

Question

The last-child pseudo class I am using on a list is not working. JSFiddle: http://jsfiddle.net/yuvLk/

HTML:

<ul class="categories">
    Categories
    <li>{category_name}</li>
    <li>{category_name}</li>
    <li>{category_name}</li>
    <li>{category_name}</li>
<ul>

CSS:

ul.categories {
   text-align: center;
}

ul.categories li {
    list-style-type: none;
    background: #E6E6E6;
    width: 250px;
    height: 40px;
}

ul.categories li:first-child{
    -webkit-border-radius: 25px 25px 0 0;
    border-radius: 25px 25px 0 0;
}

ul.categories li:last-child {
    -webkit-border-radius: 0px 0px 32px 32px;
    border-radius: 0px 0px 32px 32px;
}

I have Googled it and seen some posts on StackOverflow asking about cross-browser issues. I am not asking about cross-browser issues, I am using Chrome v23, last-child should work.

What am I overlooking/doing wrong?

Answer 1

Simple typo: You wrote <ul> instead of </ul>, so the last <li> was not really the last child.

Corrected example: http://jsfiddle.net/yuvLk/1/