What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
div > p selects only <p> elements whose immediate parent is a <div>. div p selects any <p> element at any nesting depth inside a <div>. The first uses the child combinator (>); the second uses the descendant combinator (a space).
How the two selectors match
| Selector | Relationship required | Matches |
|---|---|---|
div > p |
The paragraph’s immediate parent must be a div. |
Direct child paragraphs only. |
div p |
The paragraph must have a div ancestor at any depth. |
Direct children and paragraphs nested through other elements. |
The child combinator is documented by MDN as matching elements that are direct children of the element matched by the first selector. The descendant combinator uses one or more spaces and matches a right-hand element with a matching ancestor, as described in MDN’s descendant-combinator reference.
Example: direct child versus nested descendant
<div class="outer">
<p>Direct child</p>
<section>
<p>Nested descendant</p>
</section>
</div>div > p { color: red; }
div p { color: blue; }Both selectors match the first paragraph because its parent is the div. Only div p matches the second paragraph: its div ancestor is still present, but its immediate parent is section, not div.
What the space means in div p
The space is a combinator, not decoration and not a one-level shortcut. It allows any number of intervening elements:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<div>
<article>
<section>
<p>Still matched by div p</p>
</section>
</article>
</div>Here, div p matches the paragraph, while div > p does not.
When to use each selector
Choose div > p for component-level paragraphs
Use it when only paragraphs placed directly in the component container should receive the rule. An intervening wrapper, section, or card prevents a match, which protects nested content from being styled accidentally.
Choose div p for all paragraphs inside a region
Use it when paragraphs in nested sections, cards, or other descendants should share the rule. Because the selector reaches through every nesting level, adding wrappers can bring additional paragraphs into the match.
Consider a class when structure may change
If the styling describes a semantic component rather than a particular HTML depth, a class-based selector can make that intent clearer and less dependent on future markup changes.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Specificity is the same
div > p and div p each contain two type selectors, so both have specificity 0-0-2. The > combinator contributes no specificity. The child selector is narrower in what it matches, but it is not more specific.
If both rules match an element and their cascade origin, importance, layer, and specificity are otherwise tied, the declaration that appears later in the cascade wins. See MDN’s specificity guide.
Quick Recap
Best Value
Syntax details
div>panddiv > pmean the same thing; whitespace around>is optional.- The space in
div pis meaningful: removing it changes the selector. - Every direct child is also a descendant, so direct child paragraphs can match both selectors.
Quick decision checklist
- Need only an immediate parent-child relationship? Use
div > p. - Need paragraphs anywhere within the container? Use
div p. - Could nested content be added later? Check whether the broader descendant selector would style it unintentionally.
- Is the rule tied to a component’s meaning rather than its depth? Prefer a descriptive class selector.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
