Last child pseudo class for list not working
The last-child pseudo-class I am using on the list does not work. 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 and some posts on StackOverflow ask a question about cross-browser issues. I am not asking about multi-browser problems, I am using Chrome v23, the latter should work.
What am I missing / doing wrong?
+3
source to share
1 answer
Simple typo: you wrote <ul>
instead </ul>
, so the last <li>
one wasn't really the last one.
Corrected example: http://jsfiddle.net/yuvLk/1/
+3
source to share