DIV vs NAV tag with CSS Positioning

Question

Quick question - hopefully easy answer.

I know the <nav> tag is a block level element. Now I know whatever you put inside this tag can also be put inside a <div> in the sense of content and styling.

Now when I set the position of this element to fixed (position: fixed) it works when I use a <div> with an id tag but not when I do it inside a <nav> tag.

As long as I am using one <nav> tag, I could just style it using nav { style here } right? I don't necessarily need to use an id for it.

However the position style does not work with the <nav>.

Is there a reason for that, or should I always use id's even with a <nav>??

EDIT

Sorry I forgot to mention my user information. I am using chrome 34 and I do know the difference between classes and id's, but I have seen stylesheets and tutorials to double check where they have done what I have described. So that is why I am confused.

I guess the question would be: "Why would certain css styles work with in a div tag and not in a nav tag?" I thought it was just a semantic difference to it is easy to tell where the nav structure is.

Answer 1

As long as I am using one tag, I could just style it using nav { style here } right? I don't necessarily need to use an id for it.

Yes and no!
Yes, you are right. If there's only one tag, css nav selector is enough to uniquely select that nav. But that's it.

No, CSS cascades and also have regular and "hidden" inheritance with * and >. So your nav might be selected elsewhere with > or * without you knowing it.

However the the position style does not work with the <nav>. Is there a reason for that, or should I always use id's even with a <nav>??

Yes there is a reason. ID have second highest selection value. Html tag has lower selction value.

CSS Specificity in 4 columns:
inline=1|0|0|0, id=0|1|0|0, class=0|0|1|0, element=0|0|0|1
Left to right, highest number takes priority.

 0,1,0,0 > 0,0,10,10

1. inline
2. num of #ID
3. num of .class
4. hum of html element selectors

0. JavaScript (dom inline + last = strongest selection)

Read more here.

Try this position: fixed !important;
If it doesn't work, try unique id with !important; for that nav. If that solves the problem, you'll know it's all about specificity in selectors.

Answer 2

<nav> is just a HTML(5)-tag like other tags. Maybe your browser has a predefined (user agent) stylesheet.

My Chrome has:

So you can use all the css you need on this element as you would on a div, it has the same CSS:

This is valid for my browser, Chrome 34.

if you need to be sure about a special behaviour it's a good practice to set your expected css explicitly. In your case, you should write display: block; in addition.

Answer 3

You need to understand what is a difference between the class names and id elements So better to understand it please read a specification.

id = This attribute assigns a name to an element. This name must be unique in a document.

class = This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.