Actions like mouse hover or specific elements in a matching set can also be styled by CSS. In this video, learn about how to use pseudo-class selectors to select an element state and create matching patterns.
- [Instructor] A pseudo-class is a keyword that is added…to selectors using a colon and no spaces.…This specifies a certain state of the element.…A common one is hover.…Used to apply styles when the user…mouses over the target item.…You can also use pseudo-classes for selecting a specific…child element based on it's order.…First child selects the first child element of it's parent,…and last child selects the last child as the name implies.…
For the selector,…the keyword is added to the child element.…It is not necessary to specify the parent element.…There is also a first of type and last of type pseudo-class…which is similar with one distinction.…These two represent the first or…last child element of it's type.…Let's compare the two in an example.…First child and last child will select…the first paragraph and the last paragraph.…Let's add those styles in.…
So the first paragraph is red.…Last paragraph is blue.…But these two selectors don't make a distinction between…the types of child elements even though…the pseudo-class is attached to the paragraph selector.…
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts
Skill Level Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 19m Intermediate
1. CSS Selectors
3. Tips and Tools
4. Responsive and Mobile
- 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.