Table of Contents
Some CSS selectors can look more like a different language or test from advanced mathematics. This makes the whole process of learning for web designers and developers more difficult than necessary. What’s more, when something looks hard we are naturally less inclined to invest our time and effort in learning that particular thing. This is the reason behind today’s post. Let’s simplify the whole logic behind CSS child selector, so it will be piece of cake for you to understand it.
First or last
As Albert Einstein said:”Make things as simple as possible, but not simpler.” and the simplest and easiest way to start exploring this topic is to start with first-child and last-child selectors. These two child selectors are not difficult to understand and provide good intro into the whole subject. As their names say, they are used for selecting first (first-child) or last (last-child) child of some parent element. The second part is a key to understand how do they work. Let’s use an unordered list with seven list items to demonstrate and practice all the selectors.
HTML:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
For CSS, let’s select the unordered list and remove the dots on the side. To style the list items a bit set the float to left to align them on one line next to each other. The width and height will be 25px, background will be #eee (light grey) and border-radius set to 50%.
CSS:
ul {list-style-type: none;}
li {
float: left;
width: 25px;
height: 25px;
background: #eee;
border-radius: 50%;
}
Now, when we have the setting done, we can start practicing both of the selectors introduced above. Let’s start with first-child and select the first list item in the list and change its background to #2ecc71 (lime green).
CSS:
li:first-child { background: #2ecc71; }
To select the last list item just replace the selector for last-child.
CSS:
li:last-child { background: #2ecc71; }
nth-child
Pretty easy and not difficult at all, right? OK, let’s take a look at nth-child() selector. This selector will select the element according to number you specify in parentheses. Unlike the JavaScript were you have to remember that indexes starts on 0, in case of this selector the first element (child) is on positionwith number 1. So, to select first and last child you would use following code.
CSS:
/*Selecting the first child*/
li:nth-child(1) { background: #2ecc71; }
/*Selecting the last child*/
li:nth-child(7) { background: #2ecc71; }
What’s more, you can also use special keywords even and odd to select only even or only odd elements (children).
CSS:
li:nth-child(even) { background: #2ecc71; }
li:nth-child(odd) { background: #3498db; }
The last and the most difficult way to utilize this selector is by using (xn + y) formula. To explain this formula a bit … The x stands for the position you are starting on, i.e. the first place where the selector will be applied. n is variable that is always present in this alphabetical form. The last part, the y, will shift the first position depending on sign (+ / -) to left or right for amount of elements defined as a number used for this variable.
Let’s select every second child of the unordered list. To achieve this, we are going to use the nth-child() selector with 2n formula inside the parentheses. If you want to select every third or fourth child, just replace the number in formula.
CSS:
/*Every second child*/
li:nth-child(2n) { background: #2ecc71; }
/*Every third child*/
li:nth-child(3n) { background: #2ecc71; }
/*Every fourth child*/
li:nth-child(4n) { background: #2ecc71; }
Let’s now modify the example by selecting every second child, but starting with fifth child. What we have to do is to use xn + y formula described above. We want every second element (child) so the x will be 2. In order to move the starting position, first element on which will be applied new background, to fifth place we are going to replace the y variable with number 5. Now, the fifth list item and then every second after it will have green background.
CSS:
li:nth-child(2n + 5) { background: #2ecc71; }
As I mentioned above you can also use the minus sign (-) to move the starting position to the left instead. Let’s now select every fourth list item starting with the second item. Variable x will be 4. Instead of plus we will use minus and variable y will be 2 – moving two places to the left.
CSS:
li:nth-child(4n - 2) { background: #2ecc71; }
nth-last-child
In a situation when you have bigger amount of elements and you are looking for some more efficient way to select elements close to the end, counting all the elements every time is insane and even not necessary. The best solution is to use another child selector. The selector is nth-last-child. Unlike the previous nth-child, this selector will start on the end instead of begin. This means that the starting position is the last element, not the first one.
For example, we want to select the third element (child) from the end and then every fifth one. The formula is still xn + y. To achieve desired goal, x will be replaced by 5 (every fifth child) and y will be 3.
CSS:
li:nth-last-child(5n + 3) { background: #2ecc71; }
Formula with minus sign works exactly the same way is with nth-child() selector. Let’s now select every sixth element starting with list item on fourth position from the end.
CSS:
li:nth-last-child(6n - 2) { background: #2ecc71; }
Orphans?
The last selector I want to show you before we end this article is only-child. As its name says, it will work only in case when the element you selected is the only child of its parent. So, we cannot apply this on our example because the unordered list we worked with have more than one list item. However, if you remove all the list items except one, the styles will be applied on it.
CSS:
li:only-child { background: #2ecc71; }
Support
Every fairytale has to end in some moment when the dark side is revealed. The darker side or cons of these selectors are, as with every feature, available support. The first-child and last-child selector have pretty decent support. Only issue can appear in IE 7. On the other hand, nth-child, nth-last-child and only-child selectors are supported in IE only from version 9 and higher. Other browsers (FF, Chrome, Opera, Safari) provide very good support and you don’t have to worry about them.
Summary
I hope that this post will help you use these advanced CSS selectors in your work. You can try all the codes online on JSBin or Codepen. The last thing I want to mention before leaving you is that all above will apply to nth-of-type selector as well (the formula too). AD
If you have any questions, suggestions or ideas you want to share, leave a comment or contact me directly on twitter – AlexDevero – or facebook – lex.devero – or Google+ –+AlexDevero. Also make sure to check out my website alexdevero.com.
