Up your CSS-Game with Math

For the :children

A few months ago I stumbled across a CSS feature that I’ve come to use more and more as it has enabled me to accomplish complex layouts and styling with just a few lines of css. It has also done wonders for my jQuery selection game.

Disclaimer
The CSS provided will be written in the preprocessor Stylus, and assumes something like autoprefixr to -vendor-prefix your css.

If you have used CSS a while you probably know you can select the nth child of an element with ‘.element:nth-child(3)’; Yielding: O O O O O.

That’s all fine and dandy, but what I stumbled over a couple of months ago is that css selectors also support modulus and addition expressions. Using the formula:

:nth-child( [cycle size] n + [offset] )

This allows us to create powerful and advanced cyclic styling patterns with very few lines of css.

Let me show you some examples.

.rainbow-list
    > *
        &:nth-child(7n+1)
            background #D1F2A5
        &:nth-child(7n+2)
            background #EFFAB4
        &:nth-child(7n+3)
            background #FFC48C
        &:nth-child(7n+4)
            background #FF9F80
        &:nth-child(7n+5)
            background #F56991
        &:nth-child(7n+6)
            background #A8E6CE
        &:nth-child(7n+7)
            background #DCEDC2

I use this at my little polling site Boll to decorate the options-list, since I support an infinite number of options but don’t want to provide an infinite number of colors.

One Two Three Four Five Six Seven Eight Nine Ten Elevent Twelwe Thirteen Fourteen

Here we have set our cycle size to 7, and a specific offset to target each element in the cycle. Creating a neat cycle of
happy colors.

But will it scale?

Let’s try a layout use-case. We have this simple and common html structure, (generated by our ultra fancy templating engine of course).

<section>
    <section>
        <section class="span-half">[Image]</section>
        <section class="span-half">[Text]</section>
    </section>
    <section>
        <section class="span-half">[Image]</section>
        <section class="span-half">[Text]</section>
    </section>
    <section>
        <section class="span-half">[Image]</section>
        <section class="span-half">[Text]</section>
    </section>
</section>

Which yields us

An old camera

With personality and soul.

An iMac

Modern tool for creators.

A Yardstick

Old school tool for builders.

We want to spiff this up without having to use JavaScript or tamper with our templating. Fashion and style is ever changing, next month we might change our minds, thus we need something lightweight that doesn’t uglify our code.

I’ve created a 4-line CSS class I call “zig-zag”. Let’s append it to our outermost container and see what happens.

<section class="zig-zag">
    [...]
</section>

Yielding

An old camera

With personality and soul.

An iMac

Modern tool for creators.

A Yardstick

Old school tool for builders.

What sorcery is this? We completely changed the layout of the objects, but the html structure is the same as the boring list above. This is our new css magic at work.

Let’s look closer at that zig-zag class…

.zig-zag
    >*:nth-child(2n)
        transform: rotate(180deg);
        > *
            transform: rotate(180deg);

This means we rotate every direct second child of the zig-zag container, and then rotate the direct children of that child again so that they aren’t mirrored.

Note that there certainly are more efficient ways of doing this particular transform, like floating left/right and such. I just wanted to show you how you can get creative with the modulus operand. Imagine if we did a cycle of size 360/n and rotate n degress more per offset, I think we could see some fascinating results here!

Your turn!

Inspired? The possibilites are endless, literally! Send me what you created on Twitter and I’ll feature it below!

Be Social & Stay Tuned

Patrik Goethe