Add a class to the li element or the anchor tag?(CSS Sprites)

HTML & CSS
1

I am learning how to use sprites, but still have a long way to go :O,

When making my navigation, should I add a class to each of the anchor tags or should I add a class to each list item element? I have seen some codes placing the classes on the a tag, while others prefer to add it to the li.
My Questions:
1.Which is correct?
2. When is it preferable to use one over the over?
(for example… when adding sprite images to a regular list, should I place the class on the li, and when using an anchor tag within an li, should I place the class inside the anchor tag instead?)
Hopefully I didn’t confuse anyone with my questions.

ex:



<!-------add class to the a tag?------->

<ul class="navigation">
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About</a></li>
<li><a href="#" class="contact">Contact</a></li>
</ul>

<!--------- or add class to the the LI?---------->

<ul class="navigation">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="contact"><a href="#">Contact</a></li>

Thank you!!!

2

Hi, Welcome to Sitepoint :slight_smile:

It’s a good question and you should look at it this way.

  1. If you add a class to the anchor and then later on down the line you want to style each list element differently (say for another background image or extra styling) then you will have no choice but to add another class to the list item meaning that you may possibly have to change loads of html pages to do this.

  2. If you add the class to the list item then you can target the anchor uniquely anyway from the list (li.classname a{etc…}) and if later on you need to add specific styles to each list item you already have that in place (li.classname{}). This means no changes to the html are required.

I know which version I would choose :slight_smile: