See “The id and class attributes in HTML5” for more information. You can view this page with classes instead of ids if you wish.
id="♥" + #♥ { background: lime; }
id="©" + #© { background: lime; }
id="“‘’”" + #“‘’” { background: lime; }
id="☺☃" + #☺☃ { background: lime; }
id="⌘⌥" + #⌘⌥ { background: lime; }
id="𝄞♪♩♫♬" + #𝄞♪♩♫♬ { background: lime; }
id="💩" + #💩 { background: lime; }
id="?" + #\? { background: lime; }
id="@" + #\@ { background: lime; }
id="." + #\. { background: lime; }
id=":)" + #\3A \) { background: lime; }
id=":`(" + #\3A \`\( { background: lime; }
id="123" + #\31 23 { background: lime; }
id="1a2b3c" + #\31 a2b3c { background: lime; }
id="<p>" + #\<p\> { background: lime; }
id="<><<<>><>" + #\<\>\<\<\<\>\>\<\> { background: lime; }
id="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>." + #\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. { background: lime; }
id="#" + #\# { background: lime; }
id="##" + #\#\# { background: lime; }
id="#.#.#" + #\#\.\#\.\# { background: lime; }
id="_" + #\_ { background: lime; }
id="{}" + #\{\} { background: lime; }
id=".fake-class" + #\.fake\-class { background: lime; }
id="foo.bar" + #foo\.bar { background: lime; }
id=":hover" + #\3A hover { background: lime; }
id=":hover:focus:active" + #\3A hover\3A focus\3A active { background: lime; }
id="[attr=value]" + #\[attr\=value\] { background: lime; }
id="f/o/o" + #f\/o\/o { background: lime; }
id="f\o\o" + #f\\o\\o { background: lime; }
id="f*o*o" + #f\*o\*o { background: lime; }
id="f!o!o" + #f\!o\!o { background: lime; }
id="f'o'o" + #f\'o\'o { background: lime; }
id="f~o~o" + #f\~o\~o { background: lime; }
id="f+o+o" + #f\+o\+o { background: lime; }