CODEWITHSUNDEEP
csscss-selectorspseudo-element
nick501414
nick501414

Reputation: 129

Is it possible to combine the css3 pseudo classes :after and :lastchild?

I have a list of links and I am using the following code to put a word after each link item: 

a:after {content: "eg"}

However, I don't want the content to come after the last item in the list, so ideally I would like to say something like

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

but this is stripping the content that comes after all the links. Is there anyway way of combining these two? If there is and you can explain what is going on exactly I would really appreciate it :)

Thanks

Upvotes: 5

Views: 11603

Answers (5)

Atara
Atara

Reputation: 3569

The following selector combination worked for me:

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

Upvotes: 1

Ideogram
Ideogram

Reputation: 1375

Does this comment by "Delphi" help? (https://stackoverflow.com/a/4917325/960592

Using nick craver's solution with selectivizr allows for a cross browser solution (IE6+)

Upvotes: 0

Brian Sweat
Brian Sweat

Reputation: 415

Try this:

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: ""}​

Here is a Fiddle to demonstrate.

Also, keep in mind, if you have many users that use IE7 and IE8, the :after pseudo class does not work in IE7 and below, and the :last-child pseudo class does not work in IE8 and below. See here: http://www.quirksmode.org/css/contents.html

Upvotes: 6

Alex
Alex

Reputation: 6406

I'd do that with a combination of :not, :last-child and :after. With :not(:last-child) you select every link except the last one: http://jsfiddle.net/2CS9G/

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

If your a-tags are in a list (ul): http://jsfiddle.net/2CS9G/2/

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

Upvotes: 1

Maroshii
Maroshii

Reputation: 4027

It works for me > link

It might be that you forgot to add display: block to the a.

Upvotes: 0

Related Questions