Learn the Fundamentals of Nth-child Selectors


show more Nth-child selectors provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Core Concepts show less
please wait ...

Nth-child selectors

Of all the structural pseudo-class selectors, the most complex of them are the nth-child pseudo-class selectors. Nth-child selectors allow us to target elements based on patterns that describe which elements within a parent that you should target. Now we have four flavors of nth-child selector available to us. There is nth-child, nth of type, nth last child and last of type. Now the syntax of these selectors can seem a little odd the first time you see it. In fact, I've pulled up the Selectors Level 3 specification for you to take a quick look at this, and you can see here are a couple of examples of the nth-child syntax, and this is the symbol syntax.

So the first time you see this, it can be a little overwhelming. It looks like you're doing math. You've got this weird stuff going on here. But don't panic. It's actually pretty easy syntax. The only difference with nth-child and some of the others syntax that we are using is that you have the sort of argument that you ...

Nth-child selectors
Video duration: 13m 10s 8h 52m Beginner

Viewers:

Nth-child selectors provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Core Concepts

Subject:
Web
Software:
CSS
Author:
please wait ...