> For AI agents: the complete documentation index is available at https://nhanbe.id.vn/llms.txt, the full documentation bundle is available at https://nhanbe.id.vn/llms-full.txt. # Selectors A selector is the first part of every CSS rule. It tells the browser **which HTML elements** the rule applies to. Master selectors and you control exactly where your styles land. ## Element selectors The simplest selector targets elements by their **tag name**: ```css h1 { color: navy; } p { font-size: 18px; } li { margin-bottom: 8px; } ``` This styles **every** `

`, every `

`, and every `

  • ` on the page. Element selectors are broad - they do not distinguish between different paragraphs or different list items. ## Class selectors A class selector targets elements that have a specific `class` attribute. Class names start with a **dot** (`.`) in CSS: ```html

    Welcome to the site.

    This is a regular paragraph.

    Another intro paragraph.

    ``` ```css .intro { font-size: 20px; font-weight: bold; color: #1a1a2e; } ``` Only the two paragraphs with `class="intro"` get styled. The regular paragraph is unaffected. Key points about classes: - An element can have **multiple classes**: `

    ` - Many elements can share the **same class** - Class names are **case-sensitive**: `.Intro` and `.intro` are different - Use lowercase and hyphens for class names: `.main-content`, `.nav-link`, `.error-message` > **Tip:** Classes are the workhorse of CSS. You will use them far more than any other selector type. When in doubt, > use a class. ## ID selectors An ID selector targets the element with a specific `id` attribute. IDs start with a **hash** (`#`) in CSS: ```html

    ``` ```css #site-header { background-color: #1a1a2e; color: white; padding: 20px; } ``` Important rules for IDs: - An ID must be **unique** on the page - only one element can have a given ID - IDs have **higher specificity** than classes (we cover specificity in chapter 14) - Prefer classes over IDs for styling - IDs are better reserved for JavaScript hooks and anchor links > **Note:** Many experienced developers avoid ID selectors in CSS entirely. Classes give you the same targeting power > without the specificity issues. We mention IDs so you recognise them in other people's code. ## Universal selector The universal selector (`*`) targets **every element** on the page: ```css * { margin: 0; padding: 0; box-sizing: border-box; } ``` This is commonly used in **CSS resets** to remove default browser styles. We cover resets in chapter 16. > **Note:** The universal selector does not cause performance problems in modern browsers. The old advice to avoid `*` > is outdated. ## Grouping selectors When multiple selectors share the same declarations, you can group them with commas: ```css h1, h2, h3 { font-family: Arial, sans-serif; color: #1a1a2e; } ``` This is identical to writing three separate rules. Grouping just saves repetition. You can group any selector types together: ```css .error, .warning, #alert-banner { font-weight: bold; padding: 12px; border-radius: 4px; } ``` ## Descendant selectors A descendant selector targets elements **nested inside** other elements. You write the selectors separated by a space: ```css nav a { color: white; text-decoration: none; } ``` This targets every `` element that is **inside** a `