Dear experts

What is difference between

#header
div#header

Thanks

Recommended Answers

All 10 Replies

Nothing, though it is sometimes recommended to put div before the #

I do not believe, there must be a difference between selectors.

Not what you have put.

There is a difference between .header (a class) and #header ( a div) but as # means a div then in your example, no there is no difference.

.header is a class, #header is an id, not neccessarily a div.

div#header just means you're selecting a div with an id of header, though id's are unique anyway, no difference here in this case. One exception could be in you have a div with id of header(#header) and in another page you have an h1 tag with an id of #header, and you want to style them using the same external stylesheet, you could call them like so:

div#header {some styles here}
h1#header {some other styles here}

Of course you can have multiple classes off the same name. You could have a div with a class of .content, then you could have a paragraph with a class of .content. Then in your stylesheet, again you'd call them like:

div.content{some styles here}
p.content {some more styles here}

Hope that helps.

teedoff - I knew I had worded it wrong (should be id, not div), thank you for pointing it out.

simply: I figured thats what you meant...lol

yah there is huge difference between them.
Explanation

#header apply to the any element that has id as header
Where as
div#header apply ony to the div which has id as header.

But there must be one unique id per each element.

Could you please provide one example of both ID's

#header
div#header

<style type="text/css">

	div#header
	{
		color:blue;
	}
	
	#header
	{
		color:red;
	}
	
</style>
<div id="header">
	<p>Text Color</p>
	<a href"#" id="header">
		HeaderAnchor
	</a>
</div>

Now to make sure remove div#header css and run script red color apply to all text.
Otherwise div#header will apply to div having id header.

Feel Free to ask.

 <style type="text/css">     div#header  {       color:blue; }   #header {       color:red;  } </style><div id="header">   <p>Text Color</p> <a href"#" id="header">      HeaderAnchor    </a></div><style type="text/css">

    div#header
    {
        color:blue;
    }

    #header
    {
        color:red;
    }

 </style>
 <div id="header">
    <p>Text Color</p>
    <a href"#" id="header">
        HeaderAnchor
    </a>
 </div>

Now to make sure remove div#header css and run script red color apply to all text.
Otherwise div#header will apply to div having id header.

Feel Free to ask.

This is invalid! You can NOT have more than one id with the same name in the same page.

tqmd1, did you fully read my previous post?

I gave you an example. In one page you could have:

<div id="header"></div>

Then in another page you could have:

<h1 id="header"></h1>

And say you wanted to style them in the same stylesheet. You could then call them and style them like so:

div#header {margin: 0 auto;}
h1#header {color: red;}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.