Div Vs Nav Tag With Css Positioning

Quick question - hopefully easy answer. I know the

tag is a block level element. Now I know whatever you put inside this tag can also be put inside a

in the

Solution 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 in4 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,101.inline2. num of #ID
3. num of .class4. 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.

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

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

Share