KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
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.
Tags (comma-separated)
Save Edits
Cancel