29

I have seen an HTML code like this for the ID attribute:

id="t1:c3"

Can someone explain this to me? What is the purpose of the colon (:)?

Daniel Widdis
  • 8,424
  • 13
  • 41
  • 63
Ryan
  • 1,783
  • 8
  • 27
  • 42

3 Answers3

34

Colons are allowed inside ID attributes, but hold no special significance. It's not really advisable to use them because they can sometimes cause problems, such as when used with jQuery or CSS, where the colon has special meaning as a pseudo-selector.

Chris Fulstow
  • 41,170
  • 10
  • 86
  • 110
6

If the HTML is generated with Java ServerFaces this usually produces such IDs, i.e. if the form has the ID form1 and the element has the ID firstName this results in an ID form1:firstName if the element is on top level, if there are several ones created in a loop they look like form1:1:firstName, form1:2:firstName, …

This framework behaviour cannot be changed.

Matthias Ronge
  • 9,403
  • 7
  • 47
  • 63
  • 1
    For JSF, see here: https://stackoverflow.com/a/7928290/1599699 The exact ID must be used, so e.g. if you put `id="blah"` in your code, but that element is within an ``, well, form is a `NamingContainer` element and so the actual ID will be `form:blah` in the raw output HTML. Thus, you'll have to specify `form:blah` in your custom CSS styling. – Andrew Oct 03 '17 at 16:41
  • 1
    Note also that when using a colon in CSS styling, you need to use `\:` instead of `:` for IE 8 - IE 11 or `\3A` instead of `:` for IE 6 - IE 7 (or for any version). See here: https://stackoverflow.com/questions/122238/handling-a-colon-in-an-element-id-in-a-css-selector#comment80053896_122266 – Andrew Oct 03 '17 at 17:06
1

In addition to the above I have discovered that Omniture uses colons to help define classes related to the layout.

ktamlyn
  • 4,519
  • 2
  • 30
  • 41