Useful :nth-child Pseudo-Selector & Quantity Query Resources

Recipes for :nth-child and quantity queries can come in all forms: easy, hard, short, long. They can come in handy in times of need: when you are styling lists and you only need to select certain elements within the list, or if you need to target something based on the number of items in a grid (i.e. “If there are 8 or more items, do this..”). If you’re a Front-End Developer, you’re probably already very familiar with these selectors.

I’ve gathered these advanced :nth-child mixins and the best scenarios to use them for those of you who fall into this category. It’s always good to have a useful list of resources, and at the end you’ll find the codepen example with the code and a demonstration of how these selectors can be used.

List of Basic :nth-child Resources

If you’re not ready to jump into the advanced examples, here are a few basic references to get you started. Once you have these down, you’ll be ready for the advanced mixins in no time.

This tutorial is a good starter blog post I’ve read concerning :nth-child recipes. The author lists out the very basics, so it’s a great way to get comfortable with using the :nth-child selector. You’ll learn the basics of evens, odds, before and after :nth-elements, etc.

Family.scss provides 26 :nth-child and quantity query mixins, which are easy to understand based on their names. You’ll easily comprehend each :nth-child property, with the mixins and examples already provided for you.

Another good find is the :nth-child-tester, which allows you to pick your :nth-child recipe and test it in action. You can choose between :nth-child, :nth-of-type, :nth-last-child and :nth-last-of-type.

And On To More Advanced Resources

If you’re ready for the heavier examples, this section is the place to start reading. These are some advanced references that I’ve found, many of which have been written out into mixins.

CSS-Tricks has a great article for handy :nth-child recipes written as Sass mixins. They cover combining :nth-last-child with :first-child and multiple scenarios in which you could use this. Their Codepen examples make these complex pseudo-selector mixins easy to understand.

This Codepen by Danni C. McNinch is a good example to use if you need a rounded corners :nth-child mixin for an image grid.

A great quantity queries resource to get started with can be found here. The author breaks down the basics of how quantity queries work, and then he explains how to write one in a mixin. The last section provides a more advanced way to set up menus using quantity queries and @for loops, instead of showing/hiding two separate containers on certain screen sizes. To learn more about loops, check out Blaze’s @each loop post that breaks down the basics.

Here’s a good Sassmeister gist where you can uncomment the listed items to show how the quantity query mixin is set to change box colors when a certain number is present. If there are 6 boxes present, the first box is red. If there are 7 boxes present, the first box turns green, and if there are 8 or more boxes, they all turn yellow. This example can help you better understand how to set up quantity queries in instances where you may need them.

A Mixin for Targeting Images within a Grid

I grabbed this example from a previous project that I worked on. Here, I created a mixin to target certain images within a grid on a mobile app. This example is pretty straightforward, but very useful!

Some notes as you dig in:

  • This mixin is very useful for instances where you need to use a Tile component for an image gallery feed that has a specific number of columns per device size and an unknown amount of images within the grid (for instances where the feed continuously populates).
  • This after :nth-elements mixin allows you set your equation to pick every :nth-element after a certain number.
  • If you have a 3-column image grid and you wish to choose the images in the middle column only, you can start this mixin by calling image #2 in the grid, and after that element is called, every 3rd element throughout the rest of the grid is called.
  • In this example, I set the images for the middle column to have a specific margin. The middle columns only have margins because the grid is full-width on mobile (kind of like the Instagram grid on the user profile view), which don’t have gutters on the left or right of the screen. This is why the after :nth-elements mixin comes in handy, so that I’m able to call on those middle items within the grid starting after the first row. The below examples computes to: &:nth-child(3n+2) { margin-left: 0.2rem; margin-right: 0.2rem; }

CODEPEN EXAMPLE:

Click “Run Pen” and be sure to check out the code sample!

And here’s a screenshot of the final view from this example on mobile:

Revelry leads digital innovation that has a real impact on business goals.

Each member of our team is pivotal to our process. Check out more stories from the Design team on the Revelry blog.
Visit our Careers page to check for current openings.
Keep in touch by connecting on LinkedIn or follow us on Twitter.

More Posts by Brittany Gay: