The CSS first and last pseudo-classes select elements that are the first or last child or the first or last element of a specific type. In this video, learn how to use first-child, first-of-type, last-child, and 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 …
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Best practices for CSS
- The impact of CSS selectors on performance
Skill Level Beginner
The power of selectors1m 8s
1. Review of Basic CSS
2. Combinator Selectors
3. Attribute Selectors
Simple attribute selectors2m 47s
4. Pseudo-Classes, Pseudo-Elements, and the Universal Selector
5. Choosing Selectors
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.