css :nth-child() :after

问题:

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.

回答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/

回答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. )