This is a pseudo-class that I end up using a lot, so I decided to share how to use it and how I incorporate it in my themes!
Let’s start off by explaining what a pseudo-class is. A pseudo-class is something you add to a selector to style it for a specific state. :hover is probably the one I see the most, which is used to style an element when the mouse hovers over it.
:nth-child and its related classes (nth-of-type, first-child, last-child, etc), let you style an element based on its order. This is especially useful for styling lists. This is also how I positioned the individual posts for my honeycomb theme.
Here’s how to use it!
Let’s say we want to take this list:
<article>
<li> one </li>
<li> two </li>
<li> three </li>
<li> four </li>
<li> five </l>
</article>
and make only the second item have a blue background.
After the css for the list, we would add new styling for li:nth-child(2), which will look like this:
li {
padding: 8px;
font-family: Helvetica;
}
li:nth-child(2) {
background: cornflowerblue; /* this is just one of my favorite blues*/
}
the results:
Now we can do the same for any number in the list too, like :nth-child(3) would be the third item, and :nth-child(4) would be the fourth. If we wanted to do the first or last item, a better option would be :first-child and :last-child
Using formulas
If you wanted to make every third item blue, you would use :nth-child(3n).
so changing the CSS to this (and adding another list item in the html)
li:nth-child(3n) {
background: cornflowerblue;
}
will look like this:
More formula examples and explanations under the cut!
So this works because nth-child allows you to use a (an + b) formula
(a is an integer, n is the counter, and b is the offset value if + or - is used)
You might’ve noticed for our formula 3n, we didn’t use the + b part. We actually didn’t need the offset value, but I will explain why in a bit.
So the n is used to determine which element we are going to select. It’s essentially a counter that starts at 0. Since we are multiplying it by 3, it is going to look for every item that is a multiple of 3 (the math would look like 3 x 0, 3 x 1, 3 x 2, 3 x 6, etc, meaning that we would select the 3rd, 6th, 9th, etc).
We didn’t need the offset because for every 3rd, starting at 0, is just 3n + 0, which isn’t wrong, but just isn’t necessary to type in.
But what if we don’t want it to start at 0? That’s where the offset comes in handy!
let’s change the formula from 3n to 3n + 1, meaning the formula will start of at the first item instead of 0.
New CSS:
li:nth-child(3n + 1) {
background: cornflowerblue;
}
Result:
It’s still every 3rd, but now it start off at 1 instead of 3.
This is because the formula now works like (3 x 0) + 1 = 1 instead of 3 x 0 = 0.
If you want to do every other item or odd and even items, simply use (odd) or (even) instead of a formula! It does the math for you.
More fun with nth-child
I created my Sweetheart theme’s menu and permalink colors by using nth-child to color each list item differently. I’m going to recreate a similar layout using the example menu we’ve been using.
New CSS
li {
padding: 8px;
font-family: Helvetica;
background: cornflowerblue;
}
li:first-child {
opacity: 1;
}
li:nth-child(2) {
opacity: .8;
}
li:nth-child(3) {
opacity: .6;
}
li:nth-child(4) {
opacity: .4;
}
li:nth-child(5) {
opacity: .2;
}
Result:
Here’s an (even) and (odd) example:
CSS:
li:nth-child(odd){
list-style: square;
}
li:nth-child(even) {
list-style: circle;
}
Result:
nth-of-type
:nth-of-type functions almost identical to :nth-child, but is more specific.
for the examples above nth-child worked well because there are only list items involved, but if we had something like this:
<article>
<h1> title</h1>
<p> lorem </p>
<p> ipsum </p>
</article>
and wanted to make the 2nd <p> element have a gray background, p:nth-child(2) would not work. The first one would be gray. Why? Because it’s not specific enough.
p:nth-child(2) just means that it’s looking for the 2nd child element that happens to also be a p element. The first paragraph is the a p element and the 2nd child (the header is the first).
To fix this we need to use p:nth-of-type(2) instead. p:nth-of-type(2) means that it’s looking for the 2nd child element out of all the paragraph elements, which is what we want!
Wow this was so long, but I hope you now have a better understanding of how to use this pseudo-class! Let me know if you need me to explain anything better!
Egg Description
A white egg with a black pattern. The power that it radiates feels incredibly dark. Standing around it for too long can make you very drowsy....
Egg Image
Other Information
Generation: Fourth Generation
Rarity: Very Rare
Colour: Black
Egg Group: No Eggs
Evolution: No Evolution
Egg Description:
A transparent blue egg with many yellow spots and a red centre. It is frequently illustrated in books and said to be from the bottom of the sea.
Egg Image:
Other Information:
Fourth Generation; Rarity: Very Rare; Colour: Blue; Egg Groups: Water 1, Fairy; Find a Tiny Egg
