web-dev-qa-db-fra.com

css: nth-child (): après

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

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

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 dans ce 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;
}

J'aimerais vraiment ne pas faire ça avec js car c'est juste une fonctionnalité 'Nice to have'.

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

htmlcsscss3css-selectors
23
rockingskier

Vous pouvez, mais vous le faites mal ..

Le problème que tous vos éléments p se trouvent à l'intérieur li. Tous sont donc 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;
}

Citer la documentation du W3C

La notation de pseudo-classe :nth-child(an+b) représente un élément qui a un frère + b-1 devant lui 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 cela 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 sur http://jsfiddle.net/gaby/4H4AS/2/

Mise à jour 2

Si vous voulez que les six premiers soient différents ( et non 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 sur http://jsfiddle.net/gaby/4H4AS/3/

30
Gabriele Petrioli

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 montrée.

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

7
raina77ow