With all due respect to the writers at freeCodeCamp because I love them, I thought that a couple of things in this lesson could use clarification.
Thing One:
This sentence makes it sound as though the syntax is “target:nth-child(n)” as if that’s how you target the nth child. There should be a period before “target”, though, and that is just the class name that we are using in this particular example. Because it is buttons that we’ve assigned this class to, we are targeting all the buttons that have been assigned the “target” class. Because the same buttons have also all been assigned the class “btn”, this would achieve the same result: “.btn:nth-child(n)” in which n is the number you will insert. If you were targeting every 3rd button with the class of “sample” you would use “.sample:nth-child(3)”.
Thing Two:
You’re not targeting the children of the target-classed element. You’re targeting the elements with the target class, which are children of something else. The lesson kind of makes it sound like we’re targeting things based on the fact that they are the child of the targeted item. But the reason the word target is there is because we made a class called “target” and assigned it to buttons here:
The significance of the word “child” is because the count to “n” resets in each parent that houses elements with the targeted class. If you think of every element as being in a box (look up CSS box model if you’re interested) then it’s the nth targeted item within a box that gets the instructions applied to it. So, if you had ten elements with the class “waves” and five were in one div, and five were in another, and you styled them with “.waves:nth-child(2)”, you wouldn’t be styling the second, fourth, sixth, eighth, and tenth elements, you’d be styling the second and fourth elements in one div (box), and the second and fourth elements in the other div (box).