One of the more confusing aspects of working with CSS is the nth-child selector, and if you have never even heard of that, that's perfectly fine. It looks like this. :nth-child() I'm going to teach it a little bit different than I've seen before.

Many of the tutorials that I've seen that try to explain it in a sense almost confuse it even more, and I think that that's a mistake, because at the end of the day the nth-child selector just gives you very granular control on a numerical basis on which items you want to select.

If hearing that definition just makes you even more confused, let's just kind of walk through a visual way of doing it.

What we're going to do is we're going to style these three elements.

If you look at the HTML, we have this column class. Inside of the column class we have the icon, then we have a paragraph tag, and then we have another paragraph tag.

If you're curious on why I didn't wrap our icon in a class or the paragraph or the other paragraph, either of these in classes, I did that on purpose because I wanted to teach you how nth-child selectors worked.

The way it works is: this column has three children. It has an icon, and then it has two paragraph tags. What the nth-child selector does is it allows you to grab each one of these elements and select them without actually having a class, an ID, or even a tag name.

With the very first one, we're going to say nth-child one. We're saying, I want you to grab me your first child. Then we're going to say nth-child two. We want to grab the second one, and then nth-child three, we'll grab the last one. That's really all there is to it. Let's now go and let's build that out.

homepage.css

.features-section > .columns-wrapper > .column :nth-child(1) {
    font-size: 3em;
}

Let's go back and hit refresh.

And there we go. Now we have it working.

Now you can see we have effectively grabbed the first element here. The way that it works, imagine that if we went to the index here and one of these items, the paragraph tag, was on the top, it is the one that's going to be affected.

When I said that the way nth-child works is it gives you the ability to select by a numerical value. That's all I meant, was that you have the ability to ignore the type of tag or classes or ids, because you may not always know those, but you may know that every element is going to have three children.

Then you know how to select those automatically.

Now, technically we could have written all of this code by writing a div wrapper with the class and then adding the class to this paragraph tag and another class to this paragraph tag. It would've worked exactly the same way, but I thought this was the best way for you to understand how the nth-child works.

Now with that, let's come back to the homepage and let's grab the second child. Just grab all of the last styles we wrote. The only difference is going to be the number.

I'm going to show you an attribute we've not seen before called font weight.

Now, font weight gives you the ability to have bold and light type of text, so that is just a pretty much the same. If you've ever worked with Excel or in Word and you highlighted a word and you said, "I want this to be bold." That's really all we're doing.

homepage.css

.features-section > .columns-wrapper > .column :nth-child(2) {
    font-size: 1.5em;
    font-weight: 900;
    height: 50px;
    transition: 1s;
}

Let's hit save here. Hit refresh and you can see that's giving us exactly the styles that we're looking for.

The animation I want to have applied is for when we hover over the items, I want the letters to spread out a little bit, exactly like what we did up for the nav. The main reason isn't even for stylistic kind of purposes in a real-life application.

I'm not sure if I want these to be animated, but I really just wanted to show you that you can use pseudo selectors on nth children.

homepage.css

.features-section > .columns-wrapper > .column :nth-child(2):hover {
    letter-spacing: 1px;
}

Hit save, hit refresh. Now if you hover over one of those words, it spreads out just a little bit, just to give a little bit of an animation, then we still keep our animation here.

Now, one thing you may be curious about, the hover effect is only applied to the element we're hovering over, so when we hover over the Div, that little border gets added, but the text in the title doesn't actually start to get animated unless we hover over that.

That's something that is important to understand with how CSS works.

Now let's finish this out, and let's grab that last one. So I'm going to just copy all of this and now we want the third child here.

homepage.css

.features-section > .columns-wrapper > .column :nth-child(3) {
    letter-spacing: 2px;
}

As you can see, that gives us the exact effect that we're looking for. Just a little subtitle and the letter spacing can make some of these letters a little bit easier to read.

Great job if you went through that, you now know how to work with nth children and hopefully it's a little bit more straightforward than some of the other approaches that are out there.

In the next guide, we are going to walk through how we can add a box shadow to the bottom of this element.