Grouping & Universal Selectors
What are Grouping & Universal Selectors?
Imagine you are setting up a party. If you want to put a party hat on *everyone* in the room, you use a global command: "Everyone, put on a hat" (Universal Selector). If you want to give a gift bag to only the guests sitting at Table A and Table B, you call them out together: "Table A and Table B, please come get your bags" (Grouping Selector).In CSS:
*): Targets every single element on the webpage. It is commonly used for global layout resets, like clearing default browser margins.,): Combines multiple selectors so they share the exact same style declarations. Instead of writing separate blocks for headings, you can group them.Why does it matter?
Grouping selectors keeps your stylesheets dry (Don't Repeat Yourself). Instead of copying and pasting the same styles across different elements, you write them once, reducing file size and making future edits much easier. The universal selector is key for baseline resets, ensuring your website renders consistently across Chrome, Safari, and Firefox.Syntax Breakdown
* { box-sizing: border-box; } — Targets all elements.h1, h2, h3 { color: darkblue; } — Groups headings. Note the commas. Without the commas, it would mean something entirely different (nested selectors)!Common Mistakes
h1 h2 { color: red; } without a comma tells the browser to style an h2 that is *inside* an h1. This is descendant selection, not grouping! Always use commas to group separate selectors.* forces the browser to calculate those styles for thousands of elements, which can slow down page loading significantly.Quick Reference
* — Matches all elements in the DOM.selector1, selector2 — Groups styles for multiple targets.Your Task
In the `<style>` block, target both `h1` and `h2` elements using a single grouping selector, and set their `color` to `red`.
index.html
Type code above to start the lesson.
Live Preview