What is the difference between div#name and #name? Or is there a difference if you use class or id to position a certain element? Thank you
Add a comment
|
7 Answers
the first one is more specific if you have several rules applying for instance, in this example the first case "wins", since it is more specific.
div#kuku {color:red}
#kuku {color:blue}
A good source for reading: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Comments
You use IDs for elements that appear once in the document. You use classes for more than one elements in the page.
What is the difference between div#name and #name?
div#name
refers to only that div which has id 'name'
while #name refers to any element having id 'name'
Comments
Class selectors can apply to many tags, while an id is uniquely associated with a single tag. So I'd say that a class selector will return multiple elements, while an id selector would return one.
Comments
div#name limits the selector to DIVs with the id only.
#name apples to any element with that id.
As @naivists points out, in case of a concurrency between two rules the more explicit one (div#name) wins.
1 Comment
Alex Bagnolini
# filters attribute "id", not "name"IDs are unique on a page and have more specificity. In other words, if you have
<div id="foo" class="bar">
Then
#foo{
background: green;
}
div#foo{
background: red;
}
.bar{
background: purple;
}
will be red. There is a good Specificity Wars explanation of this using Darth Vader and Star Wars here http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Image here: http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
In brief an ID # trumps any number of classes (.) which in turn trump any number of tag selectors. e.g:
# *beats* . . . . *beats* body div div ol li p
Comments
div#name will match
<div id="name">foo</div>
but not
<span id="name">foo</span>
#name will match both, but you cannot have both in the same document as IDs are unique in the document, and classes can be multiple.
Comments
As for positioning, you generally have a number of elements with a given classname but id is specific to a single element. You generally do not want to position a number of elements at the same time, unless it is for only 1 axis.
