1

The value of id attribute is supposed to be unique. It doesn't make any sense to use a CSS selector with an element name in front of #id_name, in the sense that no two elements can have the same id value anyway. W3C website implies that two different elements can have the same id, and in the same document at the same time. Theoretically, there is a special case for h1#chapter1 where there is a different element with id=chapter1 but in such case there could not be h1 with id=chapter1 in the same document anyway. For example, two different documents on two different websites use the same id for different elements and both documents use the same style sheet. Such special cases have to be described in any spec and not left out to speculations.

This excerpt is from https://www.w3.org/TR/css3-selectors/#id-selectors

The following ID selector represents an h1 element whose ID-typed attribute has the value "chapter1": h1#chapter1

The following ID selector represents any element whose ID-typed attribute has the value "chapter1": #chapter1

The following selector represents any element whose ID-typed attribute has the value "z98y". *#z98y

John Lopui
  • 5
  • 2
  • The "special case" you describe happens *all the time* in non-conforming documents, as is the case with HTML where non-conforming pages can render without errors. Sure you could make a case for a selector with an id matching only the first such element, but the way Selectors is implemented in browsers simply doesn't make this practical. See [Several elements with the same ID responding to one CSS ID selector](http://stackoverflow.com/questions/7262195/several-elements-with-the-same-id-responding-to-one-css-id-selector) – BoltClock Jul 21 '16 at 04:37

2 Answers2

2

If you define #chapter1 in your CSS as is, any element on that page can use that selector. If you define it as h1#chapter1, only h1 elements can use that selector. So yes, you can only use it once per page regardless. However, adding the element name beforehand allows you to increase the specificity of your code.

For example:

h1#chapter1 {
    color: red;
}

Only h1 can use this ID. So if someone else on your team tries to write this HTML: <p id="chapter1">Some text</p>, the style won't be applied. Writing CSS this way allows you to ensure that only the elements you want to be styled are styled.

  • Shaan is correct. Although, an ID should only be used once so the h1 prefix in this case is superfluous. – Charlie Jul 20 '16 at 17:00
  • 2
    @Charlie Yup, an ID should only be used once, but the h1 isn't necessarily superfluous. Defining it as such can be especially handy if you're working with a team because it prevents people from using an ID to style an element that wasn't supposed to be styled with that ID or in that way. Very small case yes, but it makes sense from a consistency standpoint! –  Jul 20 '16 at 17:13
  • Makes sense. Thanks for elaborating! – Charlie Jul 20 '16 at 20:53
  • 1
    @Charlie No problem! –  Jul 20 '16 at 21:18
0

It is just an example showing how you can write the selector. It also demonstrates some additional specificity. further, this applies in cases where the ID might get moved by client-side script to an element other than the one you want, so the element as part of the selector helps prevent unexpected style application.

aardrian
  • 8,581
  • 30
  • 40