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