Using HTML5's data attribute in CSS

HTML

<header>
    <h1>Using HTML5's data attribute in CSS</h1>
    
    
    
</header>
<div class="box" data-width="thinnest">thinnest</div>
<div class="box" data-width="thinner">thinner</div>
<div class="box" data-width="thin">thin</div>
<div class="box" data-width="default">default</div>
<div class="box" data-width="wide">wide</div>
<div class="box" data-width="wider">wider</div>
<div class="box" data-width="widest">widest</div>
<div class="box">No data-width</div>
<div class="box" data-width="something-else">Something else</div>

<footer>
    <p>
    <div class="addthis_toolbox addthis_default_style" 
        addthis:url="http://jsfiddle.net/JamesKyle/8ntfZ/"
        addthis:title="Using HTML5's data attribute in CSS" 
        addthis:description="Quick tip on how to use the data attribute to make complex CSS easier to read and write.">
        <a class="addthis_button_tweet" tw:count="vertical" tw:via="thejameskyle"></a>
        <a class="addthis_button_google_plusone" g:plusone:size="tall" g:plusone:annotation="bubble"></a>
        <a class="addthis_counter"></a>
    </div>
    </p>
    
    <p>
        By James Kyle | 
        <a href="https://twitter.com/#!/thejameskyle" target="_blank">@thejameskyle</a> | 
        <a href="https://plus.google.com/u/0/114219281805415139374" target="_blank">+thejameskyle</a>
    </p>
</footer>

<script type="text/javascript">
    var addthis_share = {
        templates: { twitter: 'Using HTML5's data attribute in CSS {{url}} (from @thejameskyle)' },
    };
    var addthis_config = {"data_track_addressbar":true};
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4dafbbd349ef8622"></script>

CSS

div.box {
    background: #E5E5E5;
    height: auto; width: 400px;
    margin: 1em auto;
    padding: 1em;
    
    text-align: center;
    
}
div.box:nth-child(even) {background: #EEE}

div.box {border: 3px solid red}
div.box[data-width] {border: none}

div.box[data-width="thinnest"] { width: 47.27px }
div.box[data-width="thinner"]  { width: 200px }
div.box[data-width="thin"]     { width: 300px }
div.box[data-width="default"]  { width: 400px }
div.box[data-width="wide"]     { width: 500px }
div.box[data-width="wider"]    { width: 600px }
div.box[data-width="widest"]   { width: 700px }

html {font-size: 80%}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif}
h1 {font-size: 1.4em} p {padding: 0 0 1em}
a {color: #36c; text-decoration: none} a:hover {text-decoration: underline}
footer, header {padding: 2em}