openpolitics.com

9 Underutilized Features in CSS

Calc() is probably the most commonly used on this list, but it is so worth mentioning. If you’ve never used it, just think of it as saying, “I want this element to be this wide, minus this many pixels.”

.box {
  width: calc( 100% - 20px );
}

.. Need an ordered list, but don’t (or can’t) use an <ol> element? Don’t want to use javascript either? No worries, plain old CSS has you covered with counters.

.shelf { counter-reset: books; }

    .shelf__book { counter-increment: books; }

.shelf__book::before {
            content: "Book " counter(books) " of 10.";
        }

.. Nth-child selectors are great for removing the border from the last element in a list or striping rows in a table, but that is only the tip of the iceberg for this very useful selector function.

Using some basic algebra, you can grab “every fourth element, starting with the first.”

.book:nth-child(4n+1) { color: red; }

or “every third element, starting with the second.”

.book:nth-child(3n-1) { color: blue; }