Est-il possible de combiner le css3 pseudo-classes :after et :lastchild?

J'ai une liste de liens et je suis en utilisant le code suivant pour mettre un mot après chaque élément lien:

a:after {content: "eg"}

Cependant, je ne veux pas le contenu à venir après le dernier élément de la liste, donc, idéalement, je voudrais dire quelque chose comme

a:last-child:after {content: ""}

mais c'est le décapage, le contenu qui vient après tous les liens. Est-il de toute façon façon de combiner ces deux? Si il y est et que vous pouvez expliquer ce qui se passe exactement, je voudrais vraiment l'apprécier 🙂

Grâce

:after est un CSS2 pseudo-élément, pas un CSS3 pseudo-classe. Nous aurons besoin de voir votre code HTML, afin de comprendre à la droite du sélecteur à utiliser.

OriginalL'auteur nick501414 | 2012-03-13

  1. 6

    Essayez ceci:

    HTML: 

    <ul>
<li><a href="#">Check this out</a></li>
<li><a href="#">Check this out</a></li>
<li><a href="#">Check this out</a></li>
</ul>

    CSS:

    a:after {content: "what what"}
li:last-child > a:after {content: ""}​

    Ici est un Violon à démontrer.

    Aussi, gardez à l'esprit, si vous avez de nombreux utilisateurs d'IE7 et IE8, l' :after pseudo-classe ne fonctionne pas dans IE7 et ci-dessous, et le :last-child pseudo-classe ne fonctionne pas avec IE8 et ci-dessous. Voir ici: http://www.quirksmode.org/css/contents.html

    Merci, cela a parfaitement fonctionné!

    OriginalL'auteur Brian Sweat

  2. 1

    Je ferais ça avec une combinaison de :not, :last-child et :after. Avec :not(:last-child) vous sélectionnez tous les liens, sauf le dernier:
    http://jsfiddle.net/2CS9G/

    a:not(:last-child):after{
    content: "--";
}

    Si votre a-tags sont dans une liste (ul):
    http://jsfiddle.net/2CS9G/2/

    li:not(:last-child) a:after{
    content: "--";
}
    Pas de support pour IE < 9. Pas besoin de le faire. Même si c'est une fantastique sélection.
    Qu'est-ce que avez à faire avec la prise en charge du navigateur? (Note de côté, si l'OP est déjà à l'aide de :last-child il n'est probablement pas intéressés dans la prise en charge du navigateur.)
    Je ne sais pas à propos de "pas"! Merci, devrait faire un peu moins de code à l'avenir.
    vous êtes de droite. Je pensais que last-child avait le soutien dans IE 8, mais il ne le fait pas. Toutefois, compte tenu de l'affaire, je vous recommandons de toujours utiliser les sélecteurs qui prennent en charge les navigateurs plus anciens (qui fonctionnent exactement de la même tâche que ceux qui n'en ont pas). C'est pourquoi j'ai souligné cela.

    OriginalL'auteur Alex

  3. 1

    Le sélecteur suivant combinaison fonctionné pour moi:

    #myObj ul li:last-child::after { . . . }

    OriginalL'auteur Atara

  4. 0

    Il fonctionne pour moi > lien

    Il pourrait être que vous avez oublié d'ajouter display: block à la a.

    Les éléments en ligne peut avoir le contenu généré.
    Je suis à l'aide de l'affichage du bloc, mais je dois être d'écraser quelque chose quelque part. Merci pour le heads up!

    OriginalL'auteur Maroshii

  5. 0

    Ne ce commentaire de "Delphi" de l'aide? (https://stackoverflow.com/a/4917325/960592

    À l'aide de nick craver de la solution avec selectivizr permet une croix
    navigateur solution (IE6+)

    OriginalL'auteur Ideogram