css :nth-child() :after

Question

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.

Answer 1

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.

You will need to put the nth-child on the li elements.

#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/

Answer 2

Should be done like this:

#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; } 

JS Fiddle.

... as <p> is always the first child of <li> in the shown HTML structure.

Take note, though, that content: 'nom'; rule in the very first style definition was overwritten (but 'float' rule stood): it's the same cascading ruling for the ':after' pseudo-element as for the others. )