css:nth-child():après

Est-il possible de mélanger :nth-child() et after?

J'ai un <ol> d'éléments et je veux ajouter du texte :after. Cela fonctionne bien mais j'aimerais alors avoir un texte différent sur les 1er, 2ème et 3ème éléments, puis 4ème, 5ème et 6ème aussi.

Avec le code ci-dessous, je me retrouve avec chaque li ayant "grand" en rose après.

Cela n'a pas de sens pour moi mais je suis nouveau à cela nth-child malarky.

Les Données.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>

Joli.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;
}

J'aimerais vraiment ne pas faire cela avec js car c'est juste une fonctionnalité "agréable à avoir".

Je ne m'inquiète que des nouveaux navigateurs, donc pas besoin de solutions de contournement pour oldIE, etc.

23
demandé sur rockingskier 2012-12-19 21:07:29

2 réponses

, Vous pouvez, mais vous le faites mal..

Le problème que tous vos p éléments sont à l'intérieur li. Donc, Tous sont le premier enfant de leur conteneur li.

Vous devrez mettre le nth-child sur les éléments 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;
}

Citant la documentation du W3C

La notation de pseudo-classe :nth-child(an+b) représente un élément qui a une fratrie + b - 1 avant dans l'arborescence du document, pour tout entier positif ou valeur nulle de n, et a un élément parent.

Mise à Jour 1

Vous pouvez également simplifier en utilisant 

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

Démo à http://jsfiddle.net/gaby/4H4AS/2/

Mise à Jour 2

Si vous voulez les six premiers seulement différente (et pas les 3 premiers et les 3 derniers), vous pourriez 

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

Démo à http://jsfiddle.net/gaby/4H4AS/3/

28
répondu Gabriele Petrioli 2012-12-19 17:19:41

Devrait être fait comme ceci: 

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

... comme <p> est toujours le premier enfant de <li> dans la structure HTML affichée.

Prenez note, cependant, que la règle content: 'nom'; dans la toute première définition de style a été écrasée( mais la règle' float ' est restée): c'est la même règle en cascade pour le pseudo-élément ':after' que pour les autres. )

7
répondu raina77ow 2012-12-19 17:10:22