E#myid vs. #myid CSS Selectors

Question

I'm curious what the difference is b/w E#myid vs. #myid (E is any element) given that there can only be one element with #myid on a page?

Answer 1

It must be a bug/mistake of you that #myid has no effect on the input element. It works fine for me.

---

As you changed your question:

Image you have two different documents that both use the same stylesheet. In one document a DIV element has the ID “foo” and in the other document a SPAN element has the same ID. You can then use the following stylesheet to style both element different:

#foo {
    color: #FFF;
}
div#foo {
    background-color: #F00;
}
span#foo {
    background-color: #0F0;
}

Both elements would then have the same font color but a different background color.

Answer 2

The difference is that in different pages you could have different elements using that ID. Why you would do that, is beyond me, but it could be needed for (just an example) a div on some pages taking the same attributes as a span on other pages.

Different browsers will give you different and strange results on non specified corner cases. Some browsers allow for multiple elements sharing the same id, others don't. It even changes with different versions of the same browser. Without knowing wich browser you are using, it's harder to replicate the bug, but I recommend you to test your css on several browsers.

Answer 3

They have different specificity.

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 4

Along with the other folks points about ID not necesarily being unique on a page...

It is possible to have one ID applied to either of N different elements (eg <UL Id=MyList> or <OL Id=MyList>). Then you could have different bits of javascript to handle the various elements (ie. a bit of code to handle UL, a different bit of code to handle OL).

Not saying whether or not that's would be a good design... just saying that it's possible.

Edit: what I mean is that the server side could generate a page with either an <OL> or a >UL>... not both at one time. Think dynamic web page. And again... I'm not saying one way or another if this is a good design... just that it IS POSSIBLE.

Answer 5

The two selectors have different specificity. Rules given in a more specific selector will override rules given in a less specific one.

The specificity rules are really easy. Whenever there is a conflict (two or more rules setting different values on the same element), the following rules are consulted in order:

1) What 'space' does the rule live in? A rule in a higher 'space' automatically wins against rules in lower spaces: a) Set by the user's stylesheet, with !important b) Set by the author's stylesheet, with !important c) Set by the browser's stylesheet, with !important d) Set in a style="" rule e) Set by the user's stylesheet, without !important f) Set by the author's stylesheet, without !important g) Set by the browser's stylesheet, without !important

2) How many #ids are in the selector? Selectors with more #ids automatically win against selectors with less (assuming they tied in rule #1).

3) How many .classes or :pseudoclasses are in the selector? Selectors with more .classes automatically win against selectors with less (assuming they tied in the previous rules).

4) How many plain elements are in the selector? Again, more is better.

5) Finally, how far down in the document is the rule? Later rules override earlier rules, if they are tied on all previous categories. This applies within a document (at the bottom of your CSS file vs at the top) and between documents (any rules in the second <link>ed css file are 'later' than the rules in your first <link>ed css file).

Understanding specificity can help you write simpler CSS. I almost always start my selectors with the closest #id that I can, because it simultaneously limits the spread of the selector to exactly the elements that I want, and automatically overrides any 'global' css rules I may have set in the document.