Crazy Classes

by csswizardry

HTML

<ol class=crazy>

    <li class=_>Hello</li>
        
    <li class=?>Hello</li>
        
    <li class=#>Hello</li>
        
    <li class=->Hello</li>
        
    <li class=♥>Hello</li>
        
    <li class=—>Hello</li>
        
    <li class=ಠ_ಠ>Hello</li>
        
    <li class=.>Hello</li>

    <li class=☃>Hello</li>

    <li class=§>Hello</li>

    <li class=*>Hello</li>

    <li class=∞>Hello</li>

    <li class="`">Hello</li>

    <li class=^>Hello</li>

    <li class=:P>Hello</li>

    <li class=">.<">Hello</li>

    <li class=^.^>Hello</li>

    <li class=foo/*bar*/baz>Hello</li>

    <li class="foo<!--bar-->baz">Hello</li>

</ol>

CSS

/* 1 */
._{
    color:red;
}

/* 2 */
.\?{
    color:red;
}

/* 3 */
.\#{
    color:red;
}

/* 4 */
.\-{
    color:red;
}

/* 5 */
.♥{
    color:red;
}

/* 6 */
.—{
    color:red;
}

/* 7 */
.ಠ_ಠ{
    color:red;
}

/* 8 */
.\.{
    color:red;
}

/* 9 */
.☃{
    color:red;
}

/* 10 */
.§{
    color:red;
}

/* 11 */
.\*{
    color:red;
}

/* 12 */
.∞{
    color:red;
}

/* 13 */
.\`{
    color:red;
}

/* 14 */
.\^{
    color:red;
}

/* 15 */
.\:\P{
    color:red;
}

/* 16 */
.\>\.\<{
    color:red;
}

/* 17 */
.\^\.\^{
    color:red;
}

/* 18 */
.foo\/\*bar\*\/baz{
    color:red;
}

/* 19 */
.foo\<\!--bar--\>baz{
    color:red;
}


.crazy li:after{
    content:" "attr(class);
    color:#666;
    font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}