nth-child

Hello, have a menu but would like to select the last 2 list items and give these certain css padding values.

How could I achieve this? Here is my code:

HTML:

<div id="nav">
<ul><li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Members">Members</a></li>
<li><a href="#" title="Forums">Forums</a></li>
<li></li>
<li></li>
<li><a href="#" title="Server">Server</a></li>
<li><a href="#" title="Help">Help</a></li>
</ul>
</div>


CSS:

@font-face {font-family: ITC Avant Garde Gothic Pro;
src: url('fonts/ITCAvantGardePro-Md.otf');}

@font-face {font-family: ITC Avant Garde Gothic Pro;
font-weight: bold;
src: url('fonts/ITCAvantGardePro-Md.otf');}

#nav {width: 800px;
height: 25px;
background-color: white;
position: relative;
top: -10%;
border-top: 2px solid #a6a6a7;
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 2px solid #a6a6a7;}

#nav ul {list-style: none;
font-size: 18pt;
color: #006daf;
font-family: "ITC Avant Garde Gothic Pro";
text-transform: lowercase;
margin: 0;
padding: 0 0 0 0px;}

#nav li {display: inline;
padding: 0 26px;
line-height: 25px;
font-size: 18pt;}

#nav a,
#nav a:link,
#nav a:visited {color: #a6a6a7;
text-decoration: none;}

#nav a:active,
#nav a:hover {color: #f7852c;
text-decoration: none;}

#nav a.active {color: #9bccea;
font-weight: bold;
text-decoration: none;}


Thank you for any help,

Regards,

LC.

nth-child property of CSS3 is not compatible with IE6, 7 and 8,

its better way to make it cross browser compatible to make a class and assign it to any element of your list :)
See this (http://www.quirksmode.org/css/contents.html) for compatibility

I tried adding classes to my list item but had no change. I suspect the CSS is conflicting with what is already set in the menu css.

Any solutions to this?

I made a class and assigned it to <a> and <li> ... in both cases it worked here

:)

That must have been where I went wrong because I tried to assign the class to the <li>, then I deleted it and added it to the <a>. Must have to give the class to both elements?

I'm going to retry this now, thanks.

Regards,

LC.

EDIT: Ah that's worked, thanks very much for your help. :thumbsup:

Must have to give the class to both elements?



No, you need to assign to any 1 element either <li> or <a> :)

I tried doing that in the first instance and nothing changed. As soon as I put the class into both elements, it started working. I'll play about with it a bit more before continuing.

Regards,

LC.