Useful :nth-child Recipes

<span class="token selector">li<span class="token pseudo-class">:last-child</span> </span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Selects the 10th because we have 10 elements here, but if there was 8 it would select the 8th, or if there were 1,290 it would select the 1,290th.

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; }

Ways To Reduce Content Shifting On Page Load

Web Fonts Link

Fonts have different x-heights. Therefore, our fallback font and web font will take up a different amount of space.

Currently, one best practice for loading web fonts is to use the Font Face Observer script to detect when a font has loaded so that it can be applied in the CSS afterwards.

In this example, we are applying the webfont-loaded class to the htmlelement once the web font is ready to use.

<span class="token keyword">var</span> font <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FontFaceObserver</span><span class="token punctuation">(</span><span class="token string">'Lato'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

font<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>className <span class="token operator">+</span><span class="token operator">=</span> <span class="token string">" webfont-loaded"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

In the CSS, we apply the web font once it has successfully loaded.

<span class="token selector">p </span><span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span><span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.webfont-loaded</span> p </span><span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Lato'</span>, sans-serif<span class="token punctuation">;</span><span class="token punctuation">}</span>

When the web font finally finishes loading, we will notice a quick jump. To minimize this, we can modify the x-height of the fallback font to match the web font as closely as possible, thus reducing the jump.