nth-child : after

[jont]

I have an inline list which I am using for a step-by-step indication of the procedure:

HTML

<ul class="steps">
	<li>Step 1</li>
	<li>Step 2</li>
	<li>Step 3</li>
	<li>Step 4</li>
	<li>Step 5</li>
</ul>

CSS

ul.steps {
list-style: none;
margin: 30px 0 0 0;
padding: 0;
}

ul.steps li {
display: inline;
margin: 0;
font-size: 16px;
padding: 10px 10px 10px 8px;
background-color: #e4e4ba;
}

ul.steps li:after {
content: ">";
padding-left: 10px;
}

All is working peachy (few bits of styling not withstanding) except the last <li> also displays the ">" and shouldn't.

Tried all permutations of nth/last-of-type child in the selector to remove but seem to be missing something .. any suggestions most welcome as I have a huge chocolate egg awaiting me and just have egg on my face at the moment!

[jont]

Or is it not possible to override the :after selector with a child selector?!?!

[Duncan Rounding]

There's more than one way to skin a cat.
How about a small arrow image instead or bullets.

Unless you've still got hair left.

[jont]

I know, but was hoping for a much cleaner solution than having to add classes to the <li> .. trying to keep the HTML down to the bare simple bones for SEO and add in the styling via the CSS ... which is why css was developed.

I can target the last <li> in the list easily enough but not the last li:after ... I am wondering if the specificity of the :after is greater than the :last-child or similar pseudo-selectors?

[jont]

Might come about it the reverse and forget the :after and use the nth-child to add in background-url and count it down to the last with appropriate padding from the right to offset the image from the text, take the background-color out and add that to the <ul>

hmmmmm

[fergusw]

Try

ul.steps li:last-child:after {
   content: "";
   padding-left: 10px;
}

[jont]

Cheers Fergus - did not realise you could stack the selectors like that