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