CSS Selectors

CSS Selectors

CSS selectors define which HTML elements a style rule should be applied to. They allow you to target elements by tag name, class, ID, or their relationship to other elements. Mastering selectors is the foundation of effective web styling.

---

Basic CSS Rule Syntax

---

1. Universal Selector (*)

Targets all elements on the page.

---

2. Element Selector

Applies styles to all elements of a specific tag.

---

3. Class Selector (.classname)

Targets all elements with a specific class.

---

4. ID Selector (#idname)

Targets a single, unique element by ID.

---

5. Grouping Selector

Applies the same styles to multiple elements.

---

6. Descendant Selector

Styles elements inside other elements.

---

7. Child Selector (>)

Selects only the direct child elements.

---

Key Takeaways

• Selectors are used to target specific HTML elements for styling.
• The universal selector (*) applies to all elements.
• The element selector targets specific tags like p, h1, etc.
• The class selector (.class) can be reused across multiple elements.
• The ID selector (#id) targets a unique element on the page.
• Grouping selectors apply styles to multiple selectors at once.
• Descendant and child selectors are used to apply styles based on element hierarchy.