Cleaner Markup and Easier Maintenance with nth-child(n)

Cleaner markup and easier maintenance are advantages a coder gains with the wider acceptance of pseudo classes. The most useful CSS3 pseudo class advancement is the nth-child(n), and its related classes. nth-child(n) targets the child of a parent element using an odd or even value, a number, or an expression. Let’s look at an example of the nth-child(n) in action. I have created the following chart:

First let’s compare the difference in HTML markup when the coder uses the traditional style of coding versus nth-child(n)

HTML

Traditional HTML markup:

<ol>
<li class="odd star">Garlic Dill Pickles</li>
<li class="even">Dill Baby Bella Mushrooms</li>
...
<li class="even last">Old School Sauerkraut</li>
</ol>

HTML when pseudo classes are used:

<ol>
<li>Garlic Dill Pickles</li>
<li>Dill Baby Bella Mushrooms</li>
...
<li>Old School Sauerkraut</li>
</ol>

The new markup uses 4 less classes: odd, even, star, last. The result is cleaner presentational code. Now let’s take a look at the CSS behind this sample.

CSS

Traditional CSS styles:

ol#past .even {
background: rgb(255,255,255);
}
ol#past .odd {
background: rgb(242,242,242);
}
ol#past .star {
background-image: url(star.png);
background-position: 244px 0;
background-repeat: no-repeat;
}
ol#past .last {
border-bottom: none;
}

CSS when pseudo classes are used:

ol#pseudo li:nth-child(even) {
background: rgb(255,255,255);
}
ol#pseudo li:nth-child(odd) {
background: rgb(242,242,242);
}
ol#pseudo li:nth-child(-n+3){
background-image: url(star.png);
background-position: 244px 0;
background-repeat: no-repeat;
}
ol#pseudo li:nth-last-child(1) {
border-bottom: none;
}

When comparing the amount of code, they appear nearly identical, and in fact they have the same amount of selectors. However, the nth-child(n) and nth-last-child(n) pseudo classes allow for easier maintenance. For example, what if we simply moved the second li item to the seventh spot? The traditional chart becomes askew while the nth-child chart magically updates automatically. View the example below to see the result.

Moving The Second li Item

You may be asking, how did this happen? The magic is in the (n) part of the nth-child(n) and nth-last-child(n) pseudo classes. As I alluded to earlier in the post, the (n) can be an odd or even value, a number, or even an expression.

Because of this feature, we can target the odd li items of the ol by simply adding odd to the (n) part of the nth-child(n). ul#pseudo li:nth-child(odd) targets the odd children of the ol. While the traditional way of coding the ol causes a reordering of the li items when we start moving around li elements. We can fix this but it will involve switching several classes from the markup.

What about the star? Traditionally it is added using a class. If we copy and pasted the 3rd li element to the 7th, we would need to delete the class from the 3rd and add the star class to the 4th li element because it has moved up in the order to the 3rd spot. Phew… that is a mouth full and could easily be over-looked. With nth-child(n) we can make this process much easier.

Adding an expression, (an + b), to the mix, gives the nth-child(n) an endless amount of options. The expression is made up of the starting point, b, and the number of elements removed from your starting point, an. The an portion of the expression is a bit confusing. Think of it like this: the style for the following pseudo-class equation: 2n+1, will be applied to the first element, then every 2 elements thereafter.

Let’s look at the provided example ul#pseudo li:nth-child(-n+3). This section of CSS stars the first three recipes. 3 is the starting point, and we are subtracting 1 until we reach 0. As a result the first three li elements have the styles applied. Now if we need to move around the li elements nothing is broken and it doesn’t require 4-6 steps after the simple copy and paste.

Not convinced? Here is another example: what if we simply add another item to the list by copy and pasting another li to the bottom of the ol? View below to see the result.

Adding a li Item

At first glance the two don’t seem too far off, but take a closer look. The Traditional ol has duplicate styles at the bottom of the list. Also the 10th li item does not have a bottom border. For the table to look correct we need to switch the last li‘s class from even to odd and remove the last class from the 10th.

Now look at the nth-child ol and you will notice it is rendering perfectly. No further markup or work required. It is as simple as copying and pasting. This is because old trusty nth-last-child(n) is doing its job perfectly. The difference between nth-last-child(n) and nth-child(n) is the way nth-last-child(n) apples styles only to the last child of the parent instead of multiple children within the parent like nth-child(n).

Closing Thoughts

The nth-child(n) pseudo class is not the solution to all of your front-end development needs. There are several show-stoppers that need to be considered when using the nth-child(n) pseudo class.

Show-Stoppers

  1. Browser support
  2. Browser support
  3. Using many nth-child(n) classes can be difficult to track which can lead to overwriting issues when using them with responsive layouts
  4. Did I mention Browser support?

Unfortunately not all browsers support the newly introduced CSS3’s pseudo classes, including nth-child(n). Of course if your project only requires compatibility with modern browsers, feel free to include the nth-child(n) pseudo class in your code and reap the benefits. Until full browser support is available, use nth-child(n) and other new CSS3 pseudo classes sparingly.

Until next time, be responsible and always be responsive.

James

Written by James

Leave a Reply

*