See “The id and class attributes in HTML5” for more information. You can view this page in HTML5 instead of XHTML5 or 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=":)" + #\3A \) { background: lime; }
• id=":`(" + #\3A \`\( { background: lime; }
• id="123" + #\31 23 { background: lime; }
• id="1a2b3c" + #\31 a2b3c { 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; }

Valid XHTML5!