Using CSS to target orphan nodes of a grid.

readme.md

Use CSS to target "orphan elements" in a grid.

When you use floats to generate a grid, you may have "orphans" — nodes at the end that do not form a complete row. Perhaps you would like to style them differently or hide them! I found a way to do this using only CSS. The catch? You need to write a selector for each individual orphan element. That means in rows of 4 elements, you'll need 3 selectors. Still pretty darn useful. CSS is powerful!

css-grid-orphans.css

/* The CSS for targeting trailing nodes in a grid with rows of 4 nodes */

div:nth-last-child(-n+3):nth-child(4n+1),
div:nth-last-child(-n+2):nth-child(4n+2),
div:nth-last-child(-n+1):nth-child(4n+3) {
    background: blue;
}