CSS Selectors & Combinators
Master the art of targeting elements with precision. From basic class selectors to complex relationship combinators.
Expert Answer & Key Takeaways
Master the art of targeting elements with precision. From basic class selectors to complex relationship combinators.
1. The Basic Selectors
Selectors are used to 'find' (or select) the HTML elements you want to style. There are four primary ways to target elements.
The Example
/* 1. Universal Selector (Targets Everything) */
* { box-sizing: border-box; }
/* 2. Element Selector (Targets all <p> tags) */
p { line-height: 1.5; }
/* 3. Class Selector (Targets elements with class='btn') */
.btn { cursor: pointer; }
/* 4. ID Selector (Targets ONE element with id='submit') */
#submit { background: gold; }| Selector | Syntax | Description | Specificity |
|---|---|---|---|
| Universal | * | Targets every single element on the page. | Lowest |
| Element | p, h1 | Targets elements by their HTML tag name. | Low |
| Class | .classname | Targets multiple elements with the same class. | High |
| ID | #idname | Targets exactly one unique element. | Highest |
[!WARNING] Mastery Tip: Avoid using IDs (#) for styling. Because they have absolute specificity, they make your CSS very hard to override later. Always prefer Classes (.) for reusable design components.
2. CSS Combinators
A combinator is something that explains the relationship between selectors. It allows you to target elements based on where they are in the HTML structure.
The 4 Key Combinators
| Combinator | Name | Description |
|---|---|---|
div p | Descendant | Targets all <p> inside a div (children, grandchildren, etc.) |
div > p | Child | Targets ONLY the direct children of a div. |
div + p | Adjacent Sibling | Targets the first <p> that is placed immediately after a div. |
div ~ p | General Sibling | Targets ALL <p> elements that are siblings of a div. |
Visual Example:
/* Target only the direct child <li> of a primary <ul> */
.nav-menu > li {
display: inline-block;
margin-right: 20px;
}🎯 Practice Challenge: The Target Game
Imagine you have this HTML structure:
<div class='container'>
<p>Inside 1</p>
<section>
<p>Nested Inner</p>
</section>
</div>
<p>Outside 2</p>Your Task:
- Write a selector that targets only 'Inside 1'.
- Write a selector that targets both 'Inside 1' and 'Nested Inner'.
- Write a selector that targets 'Outside 2' only if it follows the
.containerimmediately.
[!TIP] Answers:
.container > p.container p.container + p
4. Senior Interview Corner
Q: What is the difference between
div p and div > p?A:
div p is a Descendant Selector. It will target every paragraph element inside that div, no matter how deep they are nested (children, grandchildren, etc.). div > p is a Child Selector. It only targets paragraphs that are direct children of the div. If a paragraph is inside an article tag which is inside the div, it will be ignored by >.Q: When should I use the Universal Selector (
*)?A: In production,
* is mostly used for 'Global Resets' (like setting box-sizing: border-box or removing default margin/padding from all elements). Avoid using it for actual styling (like * { color: red; }) as it causes significant performance overhead on large pages.Top Interview Questions
?Interview Question
Q:Which selector is used to target an element with a specific ID?
A:
?Interview Question
Q:Which combinator targets only the 'Direct Child' of an element?
A:
Course4All Engineering Team
Verified ExpertFrontend Architects
Focused on layout performance, modern CSS4+ features, and responsive design, our team provides the blueprint for professional web interfaces.
Pattern: 2026 Ready
Updated: Weekly
Found an issue or have a suggestion?
Help us improve! Report bugs or suggest new features on our Telegram group.