Unicode Characters for Class Names

Reader Kartlos emailed me in pointing to me to an interesting article by the great Mr. Snook from a few years back. I don’t think I had seen it before and it’s a bonafide “CSS Trick” so I thought I would share.

The idea is that you can use unicode characters (read: fancy symbols) for class names in your HTML, and even use write CSS selectors with those same characters.

<div class="♫">
    A.A. Bondy
    <em>I Can See The Pines Are Dancing</em>
</div>

.♫ { 
   display: block;
   background: #eee;
   padding: 5px;
 }

Pretty cool eh? I’d call my example above perfectly semantic as well, since the div with the music note class name is marking up a musician and song. Possibly even more semantic, as a music note symbolizes music moreso than any English word.

I put together a super simple demo page that shows it working. Oh, and yes-it-works-in-IE6™ & yes-it-validates™

But…

One funny thing? View the source on that page. I use PHP includes for the headers and footers of all my demos, and because of the character encoding (?) of that page the PHP doesn’t run it just sits there as text.

That ain’t right.

Coda does warn you first.

Weird eh? If you know how this could work both ways, let me know.

Other uses

Jonathan presented (in his original article) and idea for targeting the corners of a box.

<div class="□">
  <div class="┌">
    <div class="┐">
      <div class="└">
        <div class="┘">
          content
        </div>
      </div>
    </div>
</div>

Remember back a few years ago most of us were rocking rounded corners with nested divs and images like that! The corners symbols are clever, but I could see the <div class="□"> being used for like “container” or “box” style classes today, or, perhaps best of all, the clearfix.

I posted a little code clip of this over on Forrst (sorry I know most folks don’t have accounts there yet) and a guy named Aaron had a funny idea. Using upside down writing to be annoying! id='ɹǝpɐǝɥ', id='ɹǝddɐɹʍ', id='ɹǝʇooɟ'