using the same class in ul/li

Question

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="#">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_item1"><a href="#">SERVICE AGREEMENT/PRIVACY POLICY</a></li>
</ul>

Answer 1

The CSS3 way, without using an extra class, is

.footer_content .footer_content_item:last-child {
}

But not many browsers support that. So if you want well-rounded browser support, I think giving the last item its own class is an OK solution.

Answer 2

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.

Answer 3

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*/
}

Answer 4

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

Answer 5

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

Answer 6

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 { ... }

Answer 7

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.