Skip to content

Instantly share code, notes, and snippets.

@mal

mal/css3-ordinals.css

Created February 12, 2012 18:36
Show Gist options
  • Save mal/1810099 to your computer and use it in GitHub Desktop.
Save mal/1810099 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Ordinalisation
Raw
css3-ordinals.css
/* CSS3 Ordinalisation */
*[data-ord]:after {
content: 'th';
}
*[data-ord$="1"]:not([data-ord$="11"]):after {
content: 'st';
}
*[data-ord$="2"]:not([data-ord$="12"]):after {
content: 'nd';
}
*[data-ord$="3"]:not([data-ord$="13"]):after {
content: 'rd';
}
Raw
demo.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css3-ordinals.css"/>
<style>
/* Styling Example */
span[data-ord]:after {
color: red;
font-size: smaller;
vertical-align: super;
}
</style>
</head>
<body>
<header>
<h1>CSS3 Ordinalisation</h1>
<p>I highly recommend you tailor the CSS to your specific needs by changing the <code>*</code> to a more appropriate tag before making heavy use of it.</p>
</header>
<section>
<h3>Default (Inherit Style)</h3>
<div data-ord="1">Feb 1</div>
<div data-ord="2">Feb 2</div>
<div data-ord="3">Feb 3</div>
<div data-ord="4">Feb 4</div>
<div>...</div>
<div data-ord="11">Feb 11</div>
<div data-ord="12">Feb 12</div>
<div data-ord="13">Feb 13</div>
<div data-ord="14">Feb 14</div>
</section>
<section>
<h3>Independent Style</h3>
<div>Daphne won <span data-ord="1">1</span> prize</div>
<div>Pikachu won <span data-ord="2">2</span> prize</div>
<div>Bob won <span data-ord="3">3</span> prize</div>
<div>Sally won <span data-ord="4">4</span> prize</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment