CSS Selectors
CSS Selectors are the hooks we use to grab HTML elements and style them. Without a selector, the browser wouldn't know which element should be red, big, or centered.
Element Selectors
Element selectors target HTML tags directly, like p, h1, or div. They are very broad and apply to every instance of that tag on the entire page.
Class Selectors
To target specific elements without affecting others of the same type, we use classes. A class selector starts with a period (.), for example .button. You can reuse the same class on multiple HTML elements.
ID Selectors
ID selectors are the most powerful basic selector. They start with a hash (#), like #header. An ID must be completely unique and only used once per HTML document. They beat Classes and Elements in the specificity wars.
Universal Selector
The Universal selector is represented by an asterisk (*). As its name implies, it targets every single element on the page. It's often used at the beginning of a CSS file to reset default browser margins and paddings.
Grouping Selectors
If you have multiple elements that share the exact same styling, you can group them using a comma (,). For example, h1, h2, h3 will apply the styles to all three heading levels. This keeps your CSS clean and DRY (Don't Repeat Yourself).
A Note on Specificity
When multiple rules target the same element, CSS uses Specificity to decide which rule wins. The hierarchy is strictly: IDs beat Classes, and Classes beat Elements. The Universal selector is the weakest of them all.
View Full Transcript+
This section contains the full detailed transcript of the video lessons for accessibility purposes. It covers the difference between Element, Class (.), and ID (#) selectors, and explains the concept of grouping multiple selectors separated by a comma.