CODEWITHSUNDEEP
htmlcsscss-selectors
pastic
pastic

Reputation: 575

How to select an element that has an ID which begins with a digit?

<div id="634670717473476800" align="center" style="width: 100%; overflow-y: hidden;" class="wcustomhtml">

I have the above HTML (autogenerated, cannot change) and I try to select the entire DIV in CSS. There are several "wcustomhtml" on the page so the ID is my only choice. Straightforward I would think.

But I am not able to select it, and I don't understand why.

Neither #634670717473476800 nor div#634670717473476800 manages to select the div. Can one not select an ID consisting of numbers only?

So if it is valid HTML, what can be wrong? Neither Chrome's inspect element nor Firebug lets me create rules based on the ID in the inspector.

Upvotes: 6

Views: 4150

Answers (2)

n-dru
n-dru

Reputation: 9420

You can access it by using an attribute selector and selecting the ID attribute:

[id='634670717473476800'] {
  background-color: red;
}
<div id="634670717473476800" align="center" style="width: 100%; overflow-y: hidden;" class="wcustomhtml">div</div>

Or by escaping the number:

#\36 34670717473476800 {
  background-color: green;
}
<div id="634670717473476800" align="center" style="width: 100%; overflow-y: hidden;" class="wcustomhtml">div</div>

Citing from CSS character escape sequences:

If the first character of an identifier is numeric, you’ll need to escape it based on its Unicode code point. For example, the code point for the character 1 is U+0031, so you would escape it as \000031 or \31 .

Basically, to escape any numeric character, just prefix it with \3 and append a space character ( ). Yay Unicode!

The ID attribute from the HTML specification:

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

Upvotes: 23

HaukurHaf
HaukurHaf

Reputation: 13796

Works fine: http://jsfiddle.net/pnhr43wx/

<div id="634670717473476800"></div>
<script>
alert($('#634670717473476800').html());
</script>

Are you sure this is your actual HTML? Do a view-source instead of inspect element. The inspector shows generated HTML as well, which might not be your actual HTML at the time your selector runs.

Upvotes: -1

Related Questions