SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Prorsum's Avatar
    Join Date
    Dec 2012
    Location
    London
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Difference between styling nav, nav li, nav li a OR nav, nav ul, nav li, nav li a?

    Hi everyone,

    I want to style the menu using html5 and css3.

    I get different results depending if I style:

    nav
    nav li
    nav li a:link, etc

    or

    nav
    nav ul
    nav li
    nav li a:link, etc

    I want to know which attributes to put in each category.

    Thanks,

    Carolina

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,876
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi Carolina,

    I'm not quite sure what you're asking here.
    What are you trying to do?
    Are you trying to style a menu?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,280
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Prorsum View Post
    Hi everyone,

    I want to style the menu using html5 and css3.
    Hi Carolina,

    Using nav{} would refer to the html5 nav element that surrounds your menu.
    e.g.
    Code:
    nav{border:1px solid #000;display:block}
    Code:
    <nav>  stuff here </nav>
    The nav element would now have a border (assuming it had content or dimensions).

    If you want to target a ul inside that nav you would use:

    Code:
    nav ul{
    margin:0;
    padding:0;
    list-style:none;
    background:red;
    }
    Code:
    <nav>
    <ul>
    <li>stuff</li>
    </ul>
    
    </nav>
    The ul would now have a red background (also assuming it had content or dimensions).

    If you want to style the list element within the ul then just add it on:

    e.g.
    Code:
    nav ul li{border:1px solid green}
    Then to target the anchor:
    Code:
    nav ul li a{color:green;text-decoration:none}
    You don't actually need all the selectors if there are no conflicts within that section and you could just say nav a{} however it is likely that you don't want to style all navs on the page so you should add a class to the nav element and use that as the selector so that you style specific to navs with that class only.

    However as Pullo said above it is not entirely clear what you meant so I may be miles off target and you will need to give a little more detail to the problem

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    CSS and HTML work together; this,BTW, is why its difficult to solve a specific questions without seeing ALL the CSS and the HTML.

    Visualize it this way:
    by default, block level HTML elements (in this case all but the A's) are all transparent (essentially invisible) rectangular boxes the HEIGHT of their CONTENT and width of their CONTAINER.

    CSS targets these boxes using what is call selectors ( basically 'path' to which boxes to apply the style rules specified within the brackets.


    HTML:

    so NAV is a box around the UL which is a box around ALL the LIs and the LIs are boxes around content with the A's. As I said before, you can apply styles (color, backgrounds, etc) to each of these boxes via CSS.



    CSS rules vary in specificity.

    For example:

    UL{ background: red; } will make the bg of all ULs red
    NAV UL{ background: red; }will make the bg of ONLY ULs INSIDE NAVs red

    Because boxes nest inside each other it can appear that rules give you different (or similar ) visual results even tho they TARGET different elements ( which is the take away here)

    EXAMPLE:
    NAV LI{ background: red; }
    NAV UL{ background: red; }

    Both these rules will appear to make the SAME red box with all your list items. But the differences will become apparent if you ad another style:

    NAV LI{ background: red; margin:10px 0 }
    NAV UL{ background: red; margin:10px 0}

    This is why it's important to learn target specific elements.


    When targeting elements , there are 'equivalent' rules, these rules can conflict (or be useful):
    LI{ background:red; }
    NAV LI{ background: orange; }
    UL LI{ background: pink; }

    If your HTML ONLY has one list, and it is inside a NAV you might have expected the LIs to be orange, but in fact they will be pink. This is because of specificity


    And that's why you must consider your ENTIRE style sheet when creating selectors.


    hope that helps

  5. #5
    SitePoint Enthusiast Prorsum's Avatar
    Join Date
    Dec 2012
    Location
    London
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, very clear.


Bookmarks

Posting Permissions

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