Despite using CSS for about as long as it's been around, I am constantly learning new things and frequently blown away by its power. One of my favorite techniques is the [data-attr="data"] selector. Couple this with the attr function and you can do some particularly interesting things by blending Liquid code in your HTML, which subsequently works with your CSS. has a particularly cool, ultra simple tooltip example utilizing this wizardry. Let your imagination go with the possibilities!

A more recent find is the family of counter properties:

  • counter-reset
  • counter-increment

And the counter() function itself. One of the most popular techniques, utilized by the likes of New York Times and others, uses all of these properties and functions with the content property to automatically take care of numbering your lists.

For example:

body {
    counter-reset: section;

h2::before {
    counter-increment: section;
    content: "Step " counter(section);

More details at w3schools and css-tricks.

How do you use these techniques?