Using :nth-child
pseudo-class this can be done easily:
ul li:nth-child(n+5) {
background:#ff0000;
}
JSFiddle:
题
I have ul
with for example 15 child li
elements. The width and height from every li is the same. There are 4 li
elements on one row. No I would like to have the elements starting with the fifth child element to have a padding
of 20px
. Can I do this with a css selector or do I need to use a check to add a class beginning from the fifth element?
解决方案
Using :nth-child
pseudo-class this can be done easily:
ul li:nth-child(n+5) {
background:#ff0000;
}
JSFiddle:
其他提示
Use :nth-child() pseudo-class. It will affect 5th li
elements onwards
ul li:nth-child(n+5) {
padding: 20px;
}
You can try
ul li:nth-child(5) {
padding: 20px;
}
Fix for Dan Meehan answer: works perfectly with good html ;) http://jsfiddle.net/CVuBK/1/
<h1>