CODEWITHSUNDEEP
htmlcsscss-selectors
dv8withn8
dv8withn8

Reputation: 333

CSS3 :after Overriding :last-child

I have the following CSS to style a simple list:

ul.menu_list li {
display: inline;
}
ul.menu_list li:after {
content:" | ";
}
ul.menu_list li:last-child  {
content:"";
}

<ul class="menu_list">
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
</ul>

I get the desired effect except for the last-child is not losing it's vertical bar, " | ".

Link | Link | Link |

I've tried combining :after:last-child & vice-versa but the first :after declaration always takes precedence.

Upvotes: 5

Views: 3504

Answers (4)

ryanjohnsond
ryanjohnsond

Reputation: 503

I found "li+li:before" works in IE8, Chrome, FireFox and Safari for Windows

Upvotes: 0

scurker
scurker

Reputation: 4753

Try this instead:

ul.menu_list li:not(:last-child):after {
  content:" | ";
}

Upvotes: 2

ajm
ajm

Reputation: 20105

ul.menu_list li:last-child:after should do the trick.

Here is a fiddle that shows it in action..

Upvotes: 0

timdream
timdream

Reputation: 5922

Do:

ul.menu_list li:after {
    content:" | ";
}
ul.menu_list li:last-child:after  {
    content:"";
}

Upvotes: 6

Related Questions