Resources and further reading
If you enjoyed this course, check out Jen Kramer's other courses at Frontend Masters.
Semantic HTML
Note: All HTML elements are "semantic" in that they have meaning they convey. The two elements that have no meaning are <div> and <span>.
- MDN: HTML elements reference
- HTML Semantics Cheat Sheet
- #30DaysOfHTML: Jen's free 30 day email course introducing a few elements each day for 30 days
- DEV: Cleaner More Accessible Code With HTML
List styling tips and tricks
- CSS-Tricks: List Markers and String Styles
- Custom bullets with CSS ::marker
- Next-Level List Bullets With CSS ::marker
CSS Selectors
Basic selector information
- MDN: Selectors -- Quick summary with links to more info on type, class, ID, and attribute selectors; descendent, child, general sibling, and adjacent sibling combinators; and pseudoclasses and pseudoelements.
- CSS-Tricks: Selectors Almanac -- similar to MDN, links to all kinds of selectors, combinators, pseudoclasses, and pseudoelements.
Hot new selectors: :is(), :where(), :has()
- CSS-Tricks: The CSS :has Selector (and 4+ Examples)
- :where() :is() :has()? New CSS selectors that make your life easier
- Don’t Fight the Cascade, Control It! -- has lots to say about :where() and :is() and other selectors for default styling purposes
- MDN: :has()
- DWB: CSS :has
- CSS :has( ) A Parent Selector Now
- CSS Parent Selector
Selector Performance Data
Spoiler alert: Selector performance isn't worth worrying about.
- Performance of CSS Selectors Is Still Irrelevant
- Optimizing CSS: ID Selectors and Other Myths
- “CSS Selectors/Combinators are Slow, Classes are Fast” — They’re Lying To You!
Inheritance, Specificity, and the Cascade
Inheritance
- MDN: Inheritance overview
- Resetting Inherited CSS with “Revert”
- Smashing Mag: CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends
Specificity
- MDN: Specificity Overview
- Specificity in :not(), :has(), and :matches() (note: :matches() was renamed to :is() since this article was published)
- CSS Specificity for Poker Players -- this article is from 2007, so it doesn't contain the most recent selectors. However, the analogy is great. Challenge yourself to update this info for the new selectors.
- CSS Specificity Demo
- Specifishity