{"id":254901,"date":"2017-05-17T05:18:16","date_gmt":"2017-05-17T12:18:16","guid":{"rendered":"http:\/\/css-tricks.com\/?p=254901"},"modified":"2017-05-24T08:00:14","modified_gmt":"2017-05-24T15:00:14","slug":"extremely-handy-nth-child-recipes-sass-mixins","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/extremely-handy-nth-child-recipes-sass-mixins\/","title":{"rendered":"Some Extremely Handy `:nth-child` Recipes as Sass Mixins"},"content":{"rendered":"

There is no such thing as one-size-fits-all styling. An image gallery with three images might need to be styled differently than an image gallery with twelve. There are some cool tricks that you can use to add some number-based logic to your CSS! Using :nth-child<\/code> and :nth-last-child<\/code>, you can get some surprisingly complex information without ever leaving your stylesheet.<\/p>\n

This post will assume that you have a basic understanding of how the :nth-child<\/code> pseudo-selector works. If you need a quick refresher, Chris has a great post<\/a> covering that topic. <\/p>\n

<\/p>\n

Writing Complex :nth-child()<\/code> Selectors<\/h3>\n

You may be aware that along with :nth-child<\/code> there is the related :nth-last-child<\/code>. It works exactly the same as :nth-child<\/code> except that it starts from the end<\/em> of the parent. For example, you can select the first three children<\/em> of a parent by using the selector :nth-child(-n + 3)<\/code>. You can use :nth-last-child(-n + 3)<\/code> to select the last<\/em> three. Let’s take a look an unordered list for an example.<\/p>\n

See the Pen 1. Selecting The Last Three<\/a> by Adam Giese (@AdamGiese<\/a>) on CodePen<\/a>.<\/p>\n

Similarly, you can use :nth-last-child(n + 4)<\/code> to select all children except<\/em> the last three.<\/p>\n

See the Pen 2. Selecting All But The Last Three<\/a> by Adam Giese (@AdamGiese<\/a>) on CodePen<\/a>.<\/p>\n

The real magic<\/strong> happens when you start combining :nth-last-child<\/code> with :first-child<\/code>. By using both selectors to see if an element is both the first child of the parent and<\/em> one of the last three elements, you can style the first element of a parent only if<\/em> there are at most three elements. <\/p>\n

li:nth-last-child(-n + 3):first-child {\r\n  \/* your styling here *\/\r\n}<\/code><\/pre>\n
Continuing with our list example, here is a way to visualize how this works:<\/p>\n
See the Pen 3. Chaining Together “first-child” and “last three”<\/a> by Adam Giese (@AdamGiese<\/a>) on CodePen<\/a>.<\/p>\n
Conversely, you can use li:nth-last-child(n + 4):first-child<\/code> to select the first item of a list that has four or more<\/em> items:<\/p>\n
See the Pen 4. At Least Three Selector<\/a> by Adam Giese (@AdamGiese<\/a>) on CodePen<\/a>.<\/p>\n
Pretty cool, right? But chances are, you’ll want to style more than just the first item in a list. By using the general sibling selector, you can style any list items that follows this first element. Add both selectors separated by a comma, and you can select all elements. <\/p>\n
li:nth-last-child(n + 4):first-child,\r\nli:nth-last-child(n + 4):first-child ~ li {\r\n  \/* your styling here *\/\r\n}<\/code><\/pre>\n
See the Pen 5. At Least Four Selector<\/a> by Adam Giese (@AdamGiese<\/a>) on CodePen<\/a>.<\/p>\n
This leads to a lot of interesting possibilities! You also don’t need to just limit yourself to counting the total number of elements. By chaining together :first-child<\/code> and :nth-last child<\/code>, you can check if any valid :nth-child<\/code> expression applies to the total number of elements. You can write styling if there are a total number of odd children, if there are exactly seven children, or if there are 3n + 2<\/code> children. <\/p>\n
One real world use case that this technique can be used for is styling dropdown menus that have been automatically generated by a CMS. For an example, let’s take a look at the code generated by the WordPress wp_nav_menu()<\/code> function, cleaned up for readability:<\/p>\n
See the Pen WordPress Menu nth-child example<\/a> by Adam Giese (@AdamGiese<\/a>) on CodePen<\/a>.<\/p>\n
This looks pretty standard. Hover over the Members<\/strong> menu item, and notice the sub-menu items. <\/p>\n
Now, let’s look at the same menu with a few more members added:<\/p>\n
See the Pen WordPress Menu nth-child example, more children<\/a> by Adam Giese (@AdamGiese<\/a>) on CodePen<\/a>.<\/p>\n
Whoa! The styling that worked fine for four items doesn’t scale well to twelve. By applying the previous example, you can style the WordPress default menu purely in the stylesheet: no need to write a custom filter to change the class depending on the number of menu items: you can keep the styling in the stylesheet.<\/p>\n
See the Pen WordPress Menu nth-child example, compact<\/a> by Adam Giese (@AdamGiese<\/a>) on CodePen<\/a>.<\/p>\n
Here are some other possible use cases.<\/p>\n