using the same class in ul/li

I have this piece of code for my footer. the footer needs to have a different style for the last item with the name "SERVICE AGREEMENT/PRIVACY POLICY".. is it possible to use the same class and get the codes , i mean not using different class like what I have done?

<ul class="footer_content">
 <li class="footer_content_item"><a href="#">HOME</a></li>
 <li class="footer_content_item"><a href="#">ABO开发者_StackOverflow社区UT US</a></li>
 <li class="footer_content_item"><a href="#">CONTACT US</a></li>
 <li class="footer_content_item"><a href="#">SERVICES</a></li>
 <li class="footer_content_item1"><a href="#">SERVICE AGREEMENT/PRIVACY POLICY</a></li>
</ul>

A simpler way of doing this:

<ul class="footer_content">
 <li><a href="#">HOME</a></li>
 <li><a href="#">ABOUT US</a></li>
 <li><a href="#">CONTACT US</a></li>
 <li><a href="#">SERVICES</a></li>
 <li class="last"><a href="#">SERVICE AGREEMENT/PRIVACY POLICY</a></li>
</ul>

.footer_content li{
  /*style*/
}

.footer_content .last{
  /*style*/
}

Using CSS3:

.footer_content li:last-child {}

... but this won't work on browser not supporting CSS3, meaning old IEs and so on.

If you need to totally discriminate "normal" <li> and "last" <li>, do this:

<ul class="footer_content">
 <li class="item"><a href="#">HOME</a></li>
 <li class="item"><a href="#">ABOUT US</a></li>
 <li class="item"><a href="#">CONTACT US</a></li>
 <li class="item"><a href="#">SERVICES</a></li>
 <li class="last"><a href="#">SERVICE AGREEMENT/PRIVACY POLICY</a></li>
</ul>

.footer_content .item{
  /*style*/
}

.footer_content .last{
  /*style*/
}

A lot of people have suggested last-child, and that would work, in some browsers.

But that would not make sense, semantically, if you ask me. You want to give a different look to the 'policy', not the 'last item', even if they happen to be the same thing in this case. So I suggest using a class. You can use multiple classes because the policy entry is both a footer content item and a policy item.

<ul class="footer-content">
 <li class="footer-content-item"><a href="#">HOME</a></li>
 <li class="footer-content-item"><a href="#">ABOUT US</a></li>
 <li class="footer-content-item"><a href="#">CONTACT US</a></li>
 <li class="footer-content-item"><a href="#">SERVICES</a></li>
 <li class="footer-content-item policy"><a href="#">SERVICE AGREEMENT/PRIVACY POLICY</a></li>
</ul>

Then in your css:

.footer-content-item{

}

.policy{
  color: silver;
}

ps: I used dashes instead of underscore, since some browsers have issues with underscores in classes.

don't quite understand

you can use the psuedo class :last-child but this isn't accepted in all browsers.

JQUERY or similar could be used to apply a specific class to a specific element.

You would be better to give it it's own class. There is :last-child but it doesn't work in Internet Explorer

If it's just the one li, you could give it an id and still keep the same class as the other li's.

The standard way:

<ul id="footer">
    <li> standard LI </li>
    <li> standard LI </li>
    <li> standard LI </li>
    <li> special LI </li>
</ul>

Selecting the LI items:

#footer li { ... }

Selecting the last LI item:

#foter li:last-child { ... }

Internet explorer does not implement the :last-child pseudo-class. One solution for this issue could be:

<ul id="footer">
    <li> standard LI </li>
    <li> standard LI </li>
    <li> standard LI </li>
    <li class="last"> special LI </li>
</ul>

Now you can select the last LI like so:

#footer li.last { ... }