CSS Selectors
CSS selectors define which HTML elements styles apply to. With them, we can precisely select one element, multiple elements, or even complex structures.
Basic Selectors
Basic selectors refer directly to an HTML element, for example <p>, <div>, <h1>. With these, we can easily identify specific elements in the document.
In the following example, all <p> elements’ text becomes blue:
Common Selector Types
CSS offers several types of selectors. The table below shows the most common ones:
| Selector | Description |
|---|---|
| p | Selects all <p> elements. |
| .class | Selects elements belonging to a specific class. |
| #id | Selects the element with a specific identifier. |
| * | Selects all HTML elements. |
Complex Selectors
Complex selectors allow us to create more precise rules, for example by combining parent-child relationships or states.
Pseudo-classes
Pseudo-classes target special states and positions, for example when a mouse pointer hovers over an element or the first item in a list.
Attribute Selectors
With attribute selectors, we can target elements that have specific attributes or whose values match a pattern.
Combinators
Combinators define the relationship between elements, such as parent-child, siblings, or general hierarchy.
Tips for Using Selectors
Efficient use of selectors helps keep CSS clean and avoids unnecessary code. Here are some tips:
- Do not use overly general selectors (*), as they can cause performance issues.
- Use ID selectors sparingly, prefer classes for flexibility.
- Pay attention to specificity: more precise selectors override more general rules.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
