CSS selectors are the part of a style rule that answers the question "which elements should this styling apply to?" Every rule you write begins with a selector, so learning the selector vocabulary — element (type) selectors, class selectors, ID selectors, and the various ways of combining them — is the foundation for everything else you will do with CSS in this module.
Once you can target elements precisely, a second question arises: what happens when two or more rules try to style the same element in different ways? That is where specificity and the cascade come in. Specificity is a scoring system that ranks selectors (ID selectors outrank class selectors, which outrank element selectors), and the cascade adds rules about source order, origin, and importance. Understanding both lets you debug "why isn't my style applying?" instead of guessing.
As you watch the videos below, pay attention to three things: the exact syntax for each selector type (the dot for classes, the hash for IDs, spaces and commas between selectors mean very different things), when it is appropriate to use a class versus an ID, and how specificity is calculated when rules conflict. Try typing the examples into your own stylesheet and changing them — selector behavior is much easier to remember once you have broken a rule and fixed it yourself.
Part of CodeWithHarry's Sigma Web Development Course, this "MasterClass" session covers CSS selectors in a single fourteen-minute lesson with live coding. Expect coverage of the main selector families — element, class, and ID — along with ways of combining selectors such as grouping, descendant, and child relationships. Being part of a structured course, it is presented in a build-as-you-go style you can follow along with in your own editor.
CodeWithHarry is a well-established web development channel, and the video's broad "masterclass" scope and large viewership make it a solid single resource for the element, class, ID, and combination selector subtopics.
This Future Fullstack video focuses specifically on CSS specificity, explaining, as its description states, how different types of selectors are weighted when conflicting style declarations target the same element. It takes a deliberately detailed approach, so expect worked examples of how specificity values are calculated and compared across selector types. This is the video to watch when you need to understand why one rule wins over another.
It isolates and explains the specificity and cascade subtopics in depth — the part of selector study students most often find confusing — complementing the broader selector overviews.
A short, beginner-oriented tutorial from the Web Tech Talk "CSS Zero to Hero" series that introduces CSS selectors from the ground up. Based on its title and series framing, it should walk through the basic selector types — element, class, and ID — with simple syntax examples. At roughly eight minutes, it is designed as a quick first exposure rather than an exhaustive reference.
Its brevity and beginner focus make it a good starting point before the longer videos, giving you the core element, class, and ID selector syntax in one sitting.
Together these videos directly support MO2: the Web Tech Talk and CodeWithHarry lessons build the practical skill of constructing CSS rules with element, class, ID, and combination selectors, while the Future Fullstack video supplies the specificity and cascade reasoning needed to resolve conflicting declarations. Because selectors are what connect a stylesheet to the HTML it styles, this work also underpins the later module outcomes — you will rely on accurate, well-chosen selectors when applying box model properties (MO3), building Flexbox and positioned layouts (MO4), and organizing a complete external stylesheet for your final styled page (MO5).
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.