CODEWITHSUNDEEP
htmlcss
Abhishek Panda
Abhishek Panda

Reputation: 30

Difference between #id and div#id

I am new to css. Can someone help me in differentiating "#test" and "div#test"?

<html>
  <head></head>
  <body>
  <div>
    <span>Some stuff here..</span>
  </div>
  <div id="test">
    <span>This is my data</span>
  </div>
  </body>
</html>

Upvotes: 0

Views: 1856

Answers (9)

Greaka
Greaka

Reputation: 755

As you can see below, div#test is a selector only for divs with the id test. #test will select every element with the id test.

However, since you should never use an id multiple times, this should not be a problem. div#test will just slow down the matching in the DOM so you shouldn't use it.

Just to be clear: if you chain elements and ids, you are more specific. This means, these specifications will always override less specific ones.

div#test{color:green}
#test{color:red}

The color will be green.

If you meant div #test, that's for chaining through the DOM tree.

div#test{ float:right}
#test{color:green}
div #test{margin-left:60px}
<html>
  <head></head>
  <body>
  <div>
    <span>Some stuff here..</span>
  </div>
  <div id="test">
    <span>This is my data</span>
  </div>
  <span id="test">no data</span>
  <div>
    <span id="test">heres data</span>
  </div>
  <div>
    <p>
      <span id="test">heres data aswell</span>
    </p>
  </div>
  </body>
</html>

Upvotes: 0

karthick
karthick

Reputation: 12176

#id & div#id differs only when applying styles to that element.

Browser calculates the most relevant element by calculating specificity.

specificity calculate rules are in the follwing link https://www.w3.org/TR/CSS22/cascade.html#specificity

#id will be 0100 and div#id will be 0103

So what does the number means if you write

div#id {
  background: green;
}

#id {
  background: red;
}

the color of box will be green

reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Upvotes: 1

itacode
itacode

Reputation: 3787

The specificity is different (div#test one is higher) and div#test applies to only a div, not other tags.

div#test specificity is 0101

#test specificity is 0100

Specificity Calculator

Upvotes: 0

slevy1
slevy1

Reputation: 3820

You really ought not to qualify an ID with a tagname per the MDN, as follows:

Don’t qualify ID rules with tag names or classes

If a rule has an ID selector as its key selector, don’t add the tag name to the rule. Since IDs are unique, adding a tag name would slow down the matching process needlessly

Upvotes: 10

Nadeemmnn Mohd
Nadeemmnn Mohd

Reputation: 724

<html>
<style>
    div#test {
    background: green;
}
inspector-stylesheet:1
#test {
    background: red;
}
</style>
<body><div>
    <span>Some stuff here..</span>
  </div>
  <div id="test">
    <span>This is my data</span>
  </div></body>
<span id="test">This is my data</span>
</html>

Basically id's are unique but to show how the element is specific when used with combination div#id if there are two different elements with test for two different elements then the stronger would be the specified element like div#id

Upvotes: 0

Shuchita Gupta
Shuchita Gupta

Reputation: 1

When you use div#id it will only apply to #id that is attached to a div. Specificity of div#id is more than that of #div.

Upvotes: 0

Pratik Shah
Pratik Shah

Reputation: 1

The #id is Selects the element with id="firstname". It is one kind of CSS Selectors.

Check all CSS Selectors at https://www.w3schools.com/cssref/css_selectors.asp

There is a minor difference.

When you use div#id it will only apply to #id that are attached to a div. Otherwise the rule is ignored.

Hope it helps. Thanks

Upvotes: 0

ViLar
ViLar

Reputation: 1094

#test will take the element with the id test while div#test will only take the div with an id named test. This doesn't make a great difference since ids have to be unique.

This kind of info is pretty easy to find, you may want to take a look at W3schools documentation

Upvotes: 1

treyBake
treyBake

Reputation: 6558

The main difference is the specifity weight changes.

Doing #id is less specific than div#id

This means that your div#id rules are used because it has a higher specifity value

div#id {background: #000} 
#id {background: #fff}

The background of the div with that id will be black, even if another rule is selected afterwards

Upvotes: 2

Related Questions