recommended css notation

Question

I have a div with an ID:

<div id="main">

What's the correct (or difference) between

div#main {

and

#main {

Regards,

Answer 1

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.

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.