From the course: CSS: Selectors
Unlock the full course today
Join today to access over 22,600 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 - CSS Tutorial
From the course: CSS: Selectors
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Understanding only selectors, :only-child, :only-of-type2m 22s
-
(Locked)
Understanding first and last selectors, :first-child, :first-of-type, :last-child, :last-of-type3m 7s
-
(Locked)
Understanding nth selectors – :nth-child, :nth-of-type, :nth-last-child, :nth-last-of-type4m 9s
-
(Locked)
:root and :empty4m 27s
-
(Locked)
-
-
-
-
-