Is it possible to mix :nth-child()
and after
?
I have an <ol>
of items and I want to add some text :after
. This works fine but I'd then like to have different text on 1st, 2nd and 3rd items and then 4th, 5th and 6th as well.
With the below code I end up with every li
having 'large' in pink after it.
This doesn't make sense to me however I am new to this nth-child
malarky.
data.html
<ol id="id" class="ui-sortable">
<li>
<p>Bacon</p>
</li>
<li>
<p>Bacon</p>
</li>
<li>
<p>Bacon</p>
</li>
<!.. repeats -->
<li>
<p>Bacon</p>
</li>
</ol>
pretty.css
#id li p:after {
float: right;
content: 'nom';
}
#id li p:nth-child(1):after,
#id li p:nth-child(2):after,
#id li p:nth-child(3):after {
content: 'OM';
color: pink;
}
#id li p:nth-child(4):after,
#id li p:nth-child(5):after,
#id li p:nth-child(6):after {
content: 'Nom';
color: blue;
}
I'd really like not to do this with js as it just a 'nice to have' feature.
I'm only worried about new browsers so no need for workarounds for oldIE etc.
以前 不能正常的得到自己想要的结果
下面是正确答案
| You can, but you are doing it wrong.. 你可以,但你做错了 The issue that that all your p elements are inside li . So all of them are the first child of their li container. 这种情况所有p元素都在li中, 所以他们都是 li 容器的第一个孩子 You will need to put the nth-child on the li elements. 您需要将nth-child放在 li 元素上。 #id li:nth-child(1) p:after,
#id li:nth-child(2) p:after,
#id li:nth-child(3) p:after {
content: 'OM';
color: pink;
}
#id li:nth-child(4) p:after,
#id li:nth-child(5) p:after,
#id li:nth-child(6) p:after {
content: 'Nom';
color: blue;
}
|
| You can, but you are doing it wrong.. 你可以,但你做错了 The issue that that all your p elements are inside li . So all of them are the first child of their li container. 这种情况所有p元素都在li中, 所以他们都是 li 容器的第一个孩子 You will need to put the nth-child on the li elements. 您需要将nth-child放在 li 元素上。 #id li:nth-child(1) p:after,
#id li:nth-child(2) p:after,
#id li:nth-child(3) p:after {
content: 'OM';
color: pink;
}
#id li:nth-child(4) p:after,
#id li:nth-child(5) p:after,
#id li:nth-child(6) p:after {
content: 'Nom';
color: blue;
}
|
Quoting the W3C documentation
The :nth-child(an+b)
pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.
Update 1
You could also simplify this by using
#id li:nth-child(-n+3) p:after {
content: 'OM';
color: pink;
}
#id li:nth-last-child(-n+3) p:after { /*this means last 3*/
content: 'Nom';
color: blue;
}
Demo at http://jsfiddle.net/gaby/4H4AS/2/
Update 2
If you want the first six only to be different (and not first 3 and last 3) you could
#id li:nth-child(-n+6) p:after { /*this means first 6*/
content: 'Nom';
color: blue;
}
#id li:nth-child(-n+3) p:after {/*this means first 3 and since it comes second it has precedence over the previous for the common elements*/
content: 'OM';
color: pink;
}
Demo at http://jsfiddle.net/gaby/4H4AS/3/
来自 http://stackoverflow.com/questions/13957498/css-nth-child-after