CSS: Selectors
2h 21mIntermediate2022-08-25
Authors
Jen Kramer
Teaches web design and development
Course details
Discover how to effectively leverage the power of selectors to select the elements you want to style without adding classes, changing HTML, or getting overly specific with your selectors. In this course, instructor Jen Kramer demonstrates how to pinpoint specific parts (and groups of parts) in an HTML document using the powerful declarative syntax of CSS selectors. Jen covers combinator selectors, attribute selectors, pseudo-class and pseudo-element selectors, and the universal selector. She also offers tips for determining which selectors might not be supported by your browser choices and shares best practices for mixing selectors in your document. And because this is an easily-tested syntax, Jen includes questions at the end of most videos to reinforce your understanding of each concept.
Learning objectives
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
Learning objectives
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
Skills covered
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - The power of selectors
1. Review of Basic CSS
- 02 - CSS terminology
- 03 - Type selectors, classes, and IDs
- 04 - Selector lists
- 05 - Compound selectors
2. Combinator Selectors
- 06 - The HTML family tree - Parents, children, ancestor, descendant, and siblings
- 07 - Descendant selectors
- 08 - Parent-child selectors
- 09 - Adjacent and general sibling selectors
- 10 - Reading and writing selectors
3. Attribute Selectors
- 11 - Simple attribute selectors
- 12 - Exact and partial attribute value selectors
- 13 - Beginning, ending, and arbitrary substring attribute value selectors
- 14 - Cool attribute selector tricks
4. Pseudo-classes for document structures
- 15 - Understanding only selectors, - only-child, - only-of-type
- 16 - Understanding first and last selectors, - first-child, - first-of-type, - last-child, - last-of-type
- 17 - Understanding nth selectors - nth-child, - nth-of-type, - nth-last-child, - nth-last-of-type
- 18 - - root and - empty
5. Pseudo-classes for links
- 19 - Basic link states - - link, - visited, - hover, - active
- 20 - - any-link for combining link states
- 21 - Pseudo-classes for in-page navigation, - target
- 22 - Accessibility pseudo-classes - - focus, - focus-within
6. Pseudo-classes for forms
- 23 - Form controls - - required and - optional - enabled and - disabled
- 24 - Form controls - - read-only and - read-write
- 25 - Form control states - - indeterminate, - default, - checked
- 26 - Text fields - - autofill, - placeholder-shown
- 27 - Error checking - - valid, - invalid, - in-range, - out-of-range
7. Additional pseudo-classes, pseudo-elements, and the universal selector
- 28 - Comparing is() and where()
- 29 - Understanding - not
- 30 - - has()
- 31 - Meet the pseudo-elements - - before, - - after, - - first-line, - - first-letter
- 32 - , the universal selector
8. Choosing Selectors
- 33 - CSS selectors and browser support
- 34 - Why can't I use CSS classes exclusively Selectors best practices
- 35 - Impact of CSS selectors on performance
Conclusion
- 36 - Additional CSS practice