Discover new HTML elements and CSS Selectors that you might not know! Learn the hard parts of CSS, including inheritance, specificity, and the cascade. Plus, get hands-on with modern CSS selectors like :is(), :where(), and :has()! With this knowledge, you'll be able to create web pages with fewer classes and more concise and meaningful HTML.
Published: September 6, 2022
Resources and Downloads
Course Code https://semantics-selectors.css.education/


Table of Contents
Introduction
Introduction
00:00:00 - 00:08:17
Introduction
Jen Kramer begins the course by sharing a few misconceptions about HTML and CSS and outlining the benefits of writing clean, semantic code. The course will utilize CodePen for most of the exercises. Links to all examples and resources can be found on the course website.
HTML Overview
HTML Elements Vocabulary
00:08:18 - 00:16:05
HTML Elements Vocabulary
Jen explains HTML identifies the elements of the web page and is not responsible for the display of the page. CSS styling will control the presentation of the HTML content. The MDN web docs are a valuable reference guide for viewing information about each element.
HTML Elements Q&A
00:16:06 - 00:21:42
HTML Elements Q&A
Jen answers questions about the history of HTML, benefits of semantic markup, JavaScript dependencies, and accessibility.
HTML Lists
00:21:43 - 00:30:33
HTML Lists
Jen demonstrates ordered and unordered lists. They are two of the four list types in HTML. The other two lists types are description lists for name-value pairing and interactive lists for button groups.
CSS Overview
CSS Reset box-sizing
00:30:34 - 00:37:48
CSS Reset box-sizing
Jen introduces the box-sizing CSS property and explains why most CSS frameworks reset the value from content-box to border-box. When box-sizing is set to border-box, an element's overall width will include the element's content, padding, and border. This makes element sizing and layout more predictable. The ::before and ::after pseudo-elements are also introduced in this segment.
CSS Terminology
00:37:49 - 00:39:37
CSS Terminology
Jen spends a few minutes explaining some common CSS terms, including rules, selectors, and declaration blocks.
Class, ID, & Descendant Selectors
00:39:38 - 00:53:08
Class, ID, & Descendant Selectors
Jen reviews common CSS selectors, including selecting by class, id, and descendant. When styles are applied, they will be inherited by any nested elements unless a more specific rule is applied.
Parent-Child & Siblings Selectors
00:53:09 - 01:02:35
Parent-Child & Siblings Selectors
Jen explains parent-child selectors, general sibling selectors, and adjacent sibling selectors. The first sibling isn't selected with sibling selectors because it does not have a previous sibling. Only sibling elements that follow a sibling are selected.
Attribute Selectors
01:02:36 - 01:12:11
Attribute Selectors
Jen introduces attribute selectors, which provide options for selecting elements based on an attribute text value. There are selectors for specifying an exact match or partial match based on the text's beginning, ending, or a substring it may contain.
Attribute Selectors Exercise
01:12:12 - 01:13:43
Attribute Selectors Exercise
Students are instructed to style any link to a PDF file by adding the string "(PDF)" to the end of the link's text.
Attribute Selectors Solution
01:13:44 - 01:16:38
Attribute Selectors Solution
Jen demonstrates the solution to the Attribute Selector exercise.
Styling Elements
Ordered & Unordered List Styling
01:16:39 - 01:26:55
Ordered & Unordered List Styling
Jen explains how to use the :first-child, :last-child, :nth-child, and :nth-last-child pseudo selectors. These selectors will style elements based on their position within a parent. It can be a fixed position, like the 6th element, or a pattern like every 3rd element.
Styling List Item Markers
01:26:56 - 01:37:03
Styling List Item Markers
Jen styles unordered lists with both the list-style-type property and the ::marker pseudo-element. The list-style-type property can be set to any string value, including symbols or emojis. The ::marker pseudo-element helps utilize SVG graphics as the list element marker.
Ordered List Styling
01:37:04 - 01:40:23
Ordered List Styling
Jen demonstrates how to change the list-style-type property of ordered lists. Preset values are available like upper-roman or lower-Latin.
Description Lists & Flexbox
01:40:24 - 01:55:58
Description Lists & Flexbox
Jen introduces description lists and styles them using flexbox. Descriptions lists can have a one-to-one or many-to-many relationship between the description term and the description definition elements.
Description Lists & CSS Grid
01:55:59 - 02:04:41
Description Lists & CSS Grid
Jen uses CSS grid to fix the layout issues with description definition elements wrapping to a second row. The <dd> elements can be constrained to the second column with CSS grid.
Menu Lists
02:04:42 - 02:21:38
Menu Lists
Jen explains that menu lists contain a group of interactive list items. Typically these items carry out an in-page task programmed with JavaScript. The menu element is the parent element for a list item, just like a ul or ol element.
Lists Exercise
02:21:39 - 02:24:13
Lists Exercise
Students are instructed to add semantic markup to an ice cream recipe. Once the markup is added, CSS styling should be applied.
Lists Solution
02:24:14 - 02:35:12
Lists Solution
Jen codes the solution to the Lists exercise.
Semantic HTML
Semantic HTML Elements
02:35:13 - 02:43:28
Semantic HTML Elements
Jen introduces the semantic elements used when sectioning off content on a page. Elements like header, footer, and section might appear multiple times throughout a page, depending on its architecture. Other elements like main should only appear once because they specify an area of focus.
Content Sectioning
02:43:29 - 03:03:21
Content Sectioning
Jen walks through how to apply semantic HTML to a page. A header and footer are applied. The links at the top are wrapped with a nav element. The figure and figcapture are used with the img element.
Content Sectioning Exercise
03:03:22 - 03:05:18
Content Sectioning Exercise
Students are instructed to section the provided HTML using semantic elements.
Content Sectioning Solution
03:05:19 - 03:12:37
Content Sectioning Solution
Jen demonstrates the solution to the Content Sectioning exercise.
Pseudo-Classes
Level 4 Pseudo-Class Selectors
03:12:38 - 03:25:15
Level 4 Pseudo-Class Selectors
Jen introduces the :is(), :where(), :has(), and :not() pseudo-class selectors. Unlike older pseudo-classes like :hover or :before, these new level 4 selectors evaluate a condition to apply CSS styling. The condition is another CSS selector placed inside the parentheses.
Styling Without Classes Exercise
03:25:16 - 03:26:39
Styling Without Classes Exercise
Students are instructed to style a web page without using any CSS classes.
Styling Without Classes Solution
03:26:40 - 03:32:22
Styling Without Classes Solution
Jen demonstrates one possible solution to the Styling Without Classes exercise.
Inheritance
What Inherits in CSS
03:32:23 - 03:41:24
What Inherits in CSS
Jen outlines the major components of CSS, which include inheritance, specificity, and the cascade. Inheritance allows styling applied to a parent element to be passed down to descendants unless specifically overridden.
CSS Inheritance Demo
03:41:25 - 03:56:19
CSS Inheritance Demo
Jen demonstrates CSS inheritance and how some properties are inherited while others are not. The :root selector, the difference between display:none; and visibility:hidden:, and the :any-link pseudo-class are also discussed in this segment.
Inheritance property & Values Demo
03:56:20 - 04:11:48
Inheritance property & Values Demo
Jen demonstrates that properties with no inheritance can be forced to inherit using the "inherit" value. For example, setting border: inherit; will cause the element to inherit the border value from its parent. Canceling inheritance with the revert, initial, and unset keywords are also demonstrated in this segment.
Specificity
CSS Specificity Overview
04:11:49 - 04:22:28
CSS Specificity Overview
Jen explains how specificity is calculated. The formula counts the number of IDs, classes, and type selectors. A rule with a higher specificity will override less specific rules.
CSS Specificity Demo
04:22:29 - 04:30:41
CSS Specificity Demo
Jen uses a CodePen demo to gradually add more specificity to a CSS selector. This demonstrates how class selectors override element selectors and ID selectors override class selectors. This segment also briefly discusses inheritance and the cascade's effects on specificity.
CSS Specificity Quiz
04:30:42 - 04:32:18
CSS Specificity Quiz
Jen shares a specificity quiz that challenges students to calculate the correct specificity.
Combining Inheritance & Specificity
04:32:19 - 04:38:20
Combining Inheritance & Specificity
Jen demonstrates how specificity alone may not be enough to override some rules. Leveraging both specificity and inheritance is sometimes necessary to properly style descendant elements.
Specificity & Inheritance Exercise
04:38:21 - 04:39:34
Specificity & Inheritance Exercise
Students are instructed to explain the CSS rules and calculate the specificity of each rule.
Specificity & Inheritance Solution
04:39:35 - 04:43:33
Specificity & Inheritance Solution
Jen explains the solution to the Specificity & Inheritance exercise.
Cascade
Understanding the Cascade
04:43:34 - 04:46:34
Understanding the Cascade
Jen explains the cascade is responsible for identifying all the relevant styles to apply to the selection. This includes media queries and @supports statements.
Cascade Overview
04:46:35 - 04:51:41
Cascade Overview
Jen breaks down how the cascade determines the relevant styles based on the style's origin and the level of importance.
Cascade Code Demo
04:51:42 - 05:03:25
Cascade Code Demo
Jen demonstrates how the cascade is affected by external stylesheets. External stylesheets have the same level of importance as CSS in a style block as long as the selectors have equal specificity. The !important keyword is also demonstrated in this segment.
CSS Cascade in Dev Tools
05:03:26 - 05:09:42
CSS Cascade in Dev Tools
Jen uses the browser developer tools to inspect the CSS styling applied to a specific element on the page. Browser developer tools organize the style in order of specificity and will visually indicate which styles are overridden by more specific rules.
Layers
Layer & The Cascade
05:09:43 - 05:16:11
Layer & The Cascade
Jen explains the @layer CSS rule is used to declare a cascade layer and can also define the order of precedence when multiple cascade layers are present. Layers represent a way to group a set of styles and treat them with a specific level of importance.
Working with Layers
05:16:12 - 05:27:50
Working with Layers
Jen demonstrates how to import an external CSS file as a layer into another style sheet. When working with CSS layers, styling conflicts can occur. A few techniques to override specificity issues are covered in this segment.
Managing Multiple Layers
05:27:51 - 05:34:26
Managing Multiple Layers
Jen demonstrates how to manage multiple layers within a CSS file. Regardless of where the layers are declared, layer priority can be established using the @layer rule and ordering the layer names from least important to most important.
Wrapping Up
Wrapping Up
05:34:27 - 05:38:01
Wrapping Up
Jen summarizes the course and provides a few resources for further reading.