2

What is the difference between these two CSS selectors?

#someId
a#someId

It appears to work like the . selector would. The first selector means "select the element with the ID someID." What does the second one mean? Am I right to think it means "select the a element with ID someID"? Given that there can only be one element with a given ID on a page, what is the purpose behind specifying the tag? Does the second selector get a higher specificity?

Community
  • 1
  • 1
Katie Kilian
  • 6,815
  • 5
  • 41
  • 64
  • You're right, and yes the second selector is more specific. Now as I said in several comments here under, although it seems useless, you could have different elements sharing an id on different pages. If the stylesheet is shared accross those pages, it makes sense to differentiate on tag name in addition of ID – Laurent S. Nov 14 '13 at 16:10

4 Answers4

3

Yes, the second selector has higher specificity.

#someId is just a single ID and will select any element with that ID regardless of what element it is. a#someId is both an element and an ID, making it more specific as it will only select anchor a elements with that ID.

There is a common trick to calculating specificity and comparing the specificity of different selectors, which is to count the IDs, classes, and elements like X,X,X. The most specific selector is the one with the highest leftmost number (if that is a tie, move to the next number).

#someId is just an ID, so it's 1,0,0.

a#someId is an ID and an element, so it's 1,0,1 and therefore more specific.

IDs are always more specific than classes and classes are always more specific than elements. Psuedo-elements count as elements and psuedo-classes count as classes for the purposes of calculating specificity. Technically 256 elements = 1 class and 256 classes = 1 ID, but if you ever have that much going on in a selector string you have way bigger problems to worry about.

The only thing more specific than an ID (besides a selector string containing several IDs) is a style with !important or an inline style declared via the style attribute on the element.

More about CSS Specificity:

Ennui
  • 10,102
  • 3
  • 35
  • 42
  • 1
    If you are worried about selecting the wrong element by id, you arent using unique ids so should probably revise your code.. – SW4 Nov 14 '13 at 16:06
  • 5
    Extpro > Well, in my world stylesheets are shared among several pages, so it could be that a div on page 1 has the same id than another tag on page 2, but you may want to target only one of them through your selector... – Laurent S. Nov 14 '13 at 16:08
2

It means,

select an a element having an id someId

Yes, it's more specific.

canon
  • 40,609
  • 10
  • 73
  • 97
2

#someId

Selects the element with the id 'someId'

a#someId

Selects the anchor element with the id 'someId'

The first is the better approach on the assumption you are using unique ids as is recommended, as well as the fact it executes faster (CSS resolves right to left)

This is not a question about being specific enough when ids are included, in which case only the id selector should be used. However, if class name or nesting were present, greater levels of selection helps more accurately target specific elements. However, dont forget that overkill is just as bad as underkill- its all about balance.

SW4
  • 69,876
  • 20
  • 132
  • 137
0

The second form a#someId is overkill, as theoretically there should be no two elements with the same id in the document.

One reason I can think of using it would be if you had an element in the page that changed type but maintained the same id through some Javascript manipulation, and you wanted some CSS for that particular ID.

e.g. with some jQuery:

 <style>
 p#someId { ....}
 a#someId { ....}
 </style>

 <script>
 $('#someID').replaceWith( '<a id="someId">Now a link</a>');
 </script>
....

<p id='someId'>Not a link</p>
vogomatix
  • 4,856
  • 2
  • 23
  • 46
  • 2
    But on different pages, it is still possible to have different elements with the same ID... – Laurent S. Nov 14 '13 at 16:08
  • Good point @Bartdude, I would not have considered that. I wouldn't recommend that as a design approach or anything, but it's definitely something to keep in mind. – Katie Kilian Nov 14 '13 at 16:09
  • Well I wouldn't advice it neither, but it could definitely happen with some "generics" id. Or even if a lot of people work on the same site on a long period, it could be that the same id's are used on several pages. But in that case that selector would rather be a fix than a design decision... – Laurent S. Nov 14 '13 at 16:13
  • You guys replied while mid-edit :-), but I've shown an example where the element could change type and you wanted style for both types.... – vogomatix Nov 14 '13 at 16:18