From the course: CSS: Selectors

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Understanding first and last selectors, :first-child, :first-of-type, :last-child, :last-of-type

Understanding first and last selectors, :first-child, :first-of-type, :last-child, :last-of-type - CSS Tutorial

From the course: CSS: Selectors

Start my 1-month free trial

Understanding first and last selectors, :first-child, :first-of-type, :last-child, :last-of-type

“

[Instructor] Now that you understand the differences between an only child and an only of type, it won't come as a surprise that there are more of these types of selectors, including first child and first of type, as well as last child and last of type. First child and last child do exactly what you'd expect. They select the first child or the last child in a group of siblings. Remember, in this case, we're looking for the same type of element. So let's just look at the list portion of the HTML here, where we have a whole series of these list items and I can simply write some styles for that. I can say li:first-child, color: red, and that will make the first one red. If I say li:last-child, color:blue, that will make the last child blue. So, that's pretty straightforward. As always, the of-type selectors, first of type, last of type, tend to be a little bit more difficult to understand conceptually, so let's just take a quick peek at how those might be selecting things in this…

Contents