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

HTML & CSS
1

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

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

Hi Carolina,

Using nav{} would refer to the html5 nav element that surrounds your menu.
e.g.


nav{border:1px solid #000;display:block}



<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:


nav ul{
margin:0;
padding:0;
list-style:none;
background:red;
}



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


nav ul li{border:1px solid green}

Then to target the anchor:


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 :wink:

4

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

Thanks, very clear.