5

I have a div with an ID:

<div id="main">

What's the correct (or difference) between

div#main {

and

#main {

Regards,

Improve this question

4 Answers 4

Reset to default
3

There is a great doco on using efficient CSS selectors, focus on rules with overly qualified selectors:

ID selectors are unique by definition. Including tag or class qualifiers just adds redundant information that needs to be evaluated needlessly.

Instead of just applying the style to an element with id main, your selector will re-qualify the element by checking whether or not it's also a div (in that order). To clarify: css selectors are evaluated right to left, unlike same selector syntax when used in jQuery etc.

Re pixelistik's suggestion that div#main is more specific than #main - yes, that is technically correct, however if you have to resort to this to raise a rule's specificity, chances are the structure of CSS you're working on is not as thought through as it should be.

Improve this answer
2

#main matches everything with ID 'main', whereas div#main matches only <div> elements with ID main.

Ideally, you should never have two elements with the same ID, so realistically the two don't make a difference, but there's probably performance related issues regarding whether specifying div makes it find the result faster.

Improve this answer
6
  • 2
    Makes it slower actually. As I said in my answer below, css selectors are parsed RTL, meaning that upon finding an element with an id main, the rendering engine will have to check whether or not it's also a div. While the effort around this could be seen as negligible, I'd worry more about the structural impact and possibly unwanted specificity override.
    – Oleg
    Commented May 28, 2012 at 22:42
  • 2
    @o.v. That an element's type is checked after a browser finds it by its ID has nothing to do with RTL parsing. RTL parsing works across combinators.
    – BoltClock
    Commented May 28, 2012 at 22:44
  • @BoltClock: consider two scenarios, when a #aaa .bbb is evaluated by the rendering engine and when it is used to match DOM elements w/JS. In the first scenario, all elements matching .bbb will be found first, and then re-qualified by looking up their parent (RTL). In the second scenario, an element matching #aaa is (quickly) found and then its descendants are searched for a match against .bbb. This is what I meant by saying css selectors are parsed RTL - two polarly different ways to solve the same problem. And I don't know why, I just go with the flow :)
    – Oleg
    Commented May 28, 2012 at 22:55
  • 1
    @o.v.: That's exactly what I mean by "across combinators". In your example, you have two component selectors, #aaa and .bbb. Naturally, the key selector is .bbb, so browsers will find that first and then check if it's in an #aaa. But in the question, there's only one: div#main. Most browsers do look up a #main element and then check if it's a div, but that has nothing to do with RTL parsing.
    – BoltClock
    Commented May 28, 2012 at 23:00
  • 1
    @o.v.: Maybe... I can't say for sure since I don't know the implementation details, but I'm sure the RTL stuff doesn't go so deep.
    – BoltClock
    Commented May 28, 2012 at 23:15
2

So difference is that:

When you write div#main style will be only for <div> element. When you write #main it can be used as style for <div>, <span>, <p>, etc.

And what recommend is hard to say, every developer it has it different. So i using for example span.<nameClass> when is nested in <li> for example.

#nav li span.href a {
 ...
}

I think it's used when you want that someone class with specific name can have only one element.

So when your write span#href it will works only for <span id="href">Simply dummy text</span> not for others. When you write #href it will works for <span id="href">Simply dummy text</span> or <a href="#" id="href">Link</a> but both are correct when you also asking about this. Differences i wrote above.

Improve this answer
4
  • I can't think of a scenario when the same id could/should be applied to different elements. Even if this is not specified in the selector, you know what element you're targeting
    – Oleg
    Commented May 28, 2012 at 22:39
  • @o.v.: It can be applied to different elements in non-conforming markup, in which case #main will target all of them. But, you know, nobody likes non-conforming HTML :)
    – BoltClock
    Commented May 28, 2012 at 22:41
  • men, i know what are you talking about, author of this topic asked us to say differences between #main and div#main. So im not using this, maybe little a few times but i don't creating different elements with same class.
    – Simon Dorociak
    Commented May 28, 2012 at 22:46
  • @BoltClock: Ah, for some reason I was thinking of an awkward scenario when id="main" could be applied to either a div or a table etc., but still one id per document. I'm sure if same ID is applied to multiple elements on the page, CSS performance would be the least of your worries :)
    – Oleg
    Commented May 28, 2012 at 22:47
1

Both are correct.

div#main is more specific than #main, which means that styles defined with the first selector will override the ones of the second.

Here's a good introduction to CSS specifity: http://htmldog.com/guides/cssadvanced/specificity/

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.