1
Understand Basic CSS Selectors
2m 23s
2
Identify Interactive HTML Elements with CSS Link Pseudo Classes
3m 7s
3
Define Form Element States with CSS Form Pseudo Classes
3m 31s
4
Target Custom HTML Element Patterns with DOM Hierarchy Pseudo Classes in CSS
3m
5
Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements
6m 7s
6
Chain Simple CSS Selectors for Fine-grain DOM Element Targeting
7m 39s
7
Advanced CSS Selector Chaining for Improved Interaction without Javascript
3m 5s
8
Understand CSS Selector Specificity
5m 40s

Target Custom HTML Element Patterns with DOM Hierarchy Pseudo Classes in CSS

Garth Braithwaite

InstructorGarth Braithwaite

CSS

Share this video with your friends

DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hierarchy and what type of elements they are. You can also use :nth-child to target custom element patterns, like every other element (odd or even).

illustration for CSS Selectors in Depth

Course

CSS Selectors in Depth

NadGu

NadGu

~ 5 years ago

Very useful lesson but the -n + 4 confuses me. The -n indicates that the element 0 is included in the selection? But how is it possible if the 0th element doesn't exist?

Garth Braithwaite

Garth Braithwaiteinstructor

~ 5 years ago

If it targets an element that doesn't exist, it is just skipped over - that's how all CSS selectors work. If you have a selector that targets an element that doesn't exist, no warnings or errors are thrown, it is just ignored.