SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    0 Post(s)
    0 Thread(s)

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

    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.


    HTML Code:
    <!-------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>
    <!--------- 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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    182 Post(s)
    6 Thread(s)
    Hi, Welcome to Sitepoint

    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

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts