CSS3 :nth-last-of-child Demo

This is a neat trick I learned for CSS3 to select out the last box of a grid of floating elements and set its width to fill the remaining box.  For this, I am using a CSS pseudo-class called :nth-last-of-type(). This pseudo-class will select out the last element of the attached element in the containing element.  So in a grid of 9 span tags in a div tag, the selector will pick out the 9th box.

whats nice about selector is that it will accept arguments.  If I supply an integer (span:nth-last-of-type(2)) from the same grid, the 8th box would now be selected. The same will apply with :nth-of-type() as well.

The Task

I want to have a dynamically sized grid of an unknown number of elements. The last element needs to be selected, and if not a multiple of 3, change its width to fill the white space in the container.

See the Pen CSS Box Width Based on Content by Christopher Vachon (@liaodrake) on CodePen.

So what am I doing here?

I am first using less to compile my css for me to make my life quicker and easier. If you don't know what less is, check it out here.

So, the first thing I want to do is select out the last box in my grid, and I do that with the :nth-last-of-type() pseudo-class.

.box {
    width:31%;
    margin: 0 2% 0 0;
    background-color: #090;
}
/* select out the last box */
.box:nth-last-of-type(1) {
    background-color: #900;
}

Next, we want to find out if the selected box is the first, second, or third of its row. Remember that we want to have 3 boxes per row.  Do do this, we can use the :nth-of-type() pseudo-class by providing an nth formula as the parameter.

.box:nth-last-of-type(1) {
    background-color: #900;
}
.box:nth-last-of-type(1):nth-of-type(3n+1) {
    width: 97%;
}
.box:nth-last-of-type(1):nth-of-type(3n+2) {
    width: 64%;
}

The formula 3n will select out every 3rd box. By adding +1, I am selecting out every 3rd box plus 1, so every 4th, 7th, 10th, etc.  The same applies to the +2.  So by combining our :nth-last-of-type() selector to select out the last element, and our :nth-of-type() selector to select out the 1st or 2nd element of the row, I am able to set the width of the box to fill the remaining content.

What can I do with this technique?

By modifying the selectors a little, I can also select out the last 2 elements and have the bottom two share the width as opposed to just the last block taking up 2 positions

Conclusion

Using pseudo selectors makes css a far more powerful tool for display than trying to use server-side or front-end logic.