What does the ">" (greater-than sign) CSS selector mean?

Question

For example:

div > p.some_class {
  /* Some declarations */
}

What exactly does the > sign mean?

BoltClock · Accepted Answer · 2021-04-28T16:01:51.757

778

> is the child combinator, sometimes mistakenly called the direct descendant combinator.¹

That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.

An illustration comparing the child combinator with the descendant combinator:

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

<div>
    <p class="some_class">Some text here</p>     <!-- [1] div > p.some_class, div p.some_class -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- [2] div p.some_class -->
    </blockquote>
</div>

Which elements are matched by which selectors?

Matched by both div > p.some_class and div p.some_class
This p.some_class is located directly inside the div, hence a parent-child relationship is established between both elements. Since "child" is a type of "descendant", any child element is by definition also a descendant. Therefore, both rules are applied.
Matched by only div p.some_class
This p.some_class is contained by a blockquote within the div, rather than the div itself. Although this p.some_class is a descendant of the div, it's not a child; it's a grandchild. Therefore, only the rule with the descendant combinator in its selector is applied.

¹ _{Many people go further to call it "direct child" or "immediate child", but that's completely unnecessary (and incredibly annoying to me), because a child element is immediate by definition anyway, so they mean the exact same thing. There's no such thing as an "indirect child".}

edited Apr 28 '21 at 16:01

answered Jul 12 '10 at 04:35

BoltClock

700,868
160
1,392
1,356

3

+1 Is it really called a *child selector*? If so, that is pretty misleading. I would of thought `#something a` would be a child selector. – alex Sep 08 '10 at 01:31
4

@alex: [yes](http://www.w3.org/TR/CSS2/selector.html#child-selectors) :) `#something a` could mean `a` is a grandchild or great^n grandchild of `#something` (it doesn't take into account depth of nesting). – BoltClock Sep 08 '10 at 01:33
Well I mean it is still a child... a grandchild maybe :P – alex Sep 08 '10 at 01:45
13

@alex it's called the [child combinator](http://www.w3.org/TR/css3-selectors/#child-combinators), the space is called the [descendent combinator](http://www.w3.org/TR/css3-selectors/#descendant-combinators) – robertc Jan 09 '11 at 23:31
38

When someone is their grandparent's child, we're dealing with a really nasty instance of incest. Happily, that is impossible in HTML. – Quentin Sep 16 '14 at 09:34
Flagging this thread on suspicion of promoting textual pedophilia and incest (kidding) – AndrewL64 Aug 08 '15 at 21:52
1

Annoying or not to call it a direct child it makes it instantly clear to the uneducated, I think it's a good description. – Eoin Nov 24 '15 at 10:48
10

I don't hear any laymen calling their kids their direct children for the sake of clarity. – BoltClock Nov 24 '15 at 13:08
The term "direct" is pretty confusing. In [other areas](https://en.wikipedia.org/wiki/Lineal_descendant) it means "not via a sibbling or similar". That isn't something HTML does (unless you consider elements which are moved by JS, a consideration CSS doesn't care about). – Quentin Oct 07 '16 at 11:39
1

@Quentin: That's true. Perhaps "immediate" is more appropriate here. I can't think of any good alternative to just "child", but people seem insistent on conflating "child" and "descendant"... – BoltClock Oct 07 '16 at 11:43
@BoltClock — Maybe "the child combinator, sometimes mistakenly called the direct descendant combinator"? – Quentin Oct 07 '16 at 11:45
2

Am I missing something? Child would be next level down. descendant could be any number of levels down. So in that case, child == direct descendant. So why is it "sometimes mistakenly called direct descendant combinator"? direct child would be wrong, but direct descendant seems correct? Please do correct me if im wrong here. – redfox05 Nov 15 '16 at 17:40
1

The footnote seems correct as it talks about direct child, which I agree is pointless as a child is the immediate next level down anyway, but the main text seems wrong for the reasons above. – redfox05 Nov 15 '16 at 17:42
1

I would say: `"> is the child combinator/direct descendant, sometimes mistakenly called the direct child combinator"` – redfox05 Nov 15 '16 at 17:43
@redfox05: See Quentin's comments just above yours. – BoltClock Nov 15 '16 at 17:48

score 59 · Answer 2 · edited Mar 07 '18 at 10:22

59

> (greater-than sign) is a CSS Combinator.

A combinator is something that explains the relationship between the selectors.

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS3:

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

Note: < is not valid in CSS selectors.

For example:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Output:

More information about CSS Combinators

edited Mar 07 '18 at 10:22

Community

1
1

answered Feb 13 '17 at 00:49

Premraj

72,055
26
237
180

1

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors – Lalit Yadav May 14 '18 at 17:12
@premraj Thank you for the excellent explanation of parent-child css selectors! – YCode Feb 12 '19 at 23:14
What does it mean then when you get something like `.entry-content > * {"code" }` which is followed by `.entry-content {"other code" }`? Doesn't `.entry-content > *` cover all the children of `entry-content`? – YCode Feb 12 '19 at 23:18

score 14 · Answer 3 · answered Jul 12 '10 at 04:37

14

As others mention, it's a child selector. Here's the appropriate link.

http://www.w3.org/TR/CSS2/selector.html#child-selectors

answered Jul 12 '10 at 04:37

Dagg Nabbit

75,346
19
113
141

Thank you very much for the link ! I discovered also the "Adjacent sibling selectors" there. – Misha Moroshko Jul 12 '10 at 04:46
You'll find [browser support](http://reference.sitepoint.com/css/childselector#compatibilitysection) on Sitepoint. Doesn't work in IE6 if it matters for your projects, OK everywhere else. This resource is esp. useful for siblings, :nth-child() etc where support is still incomplete – FelipeAls Jul 12 '10 at 04:59

score 10 · Answer 4 · answered Jul 12 '10 at 04:35

10

It matches p elements with class some_class that are directly under a div.

answered Jul 12 '10 at 04:35

dan04

87,747
23
163
198

score 5 · Answer 5 · edited Jan 08 '17 at 02:05

5

All p tags with class some_class which are direct children of a div tag.

edited Jan 08 '17 at 02:05

Let Me Tink About It

15,156
21
98
207

answered Jul 12 '10 at 04:34

tschaible

7,635
1
31
34

Avinash Malhotra · Answer 6 · 2023-05-08T08:03:12.773

( child selector) was introduced in css2. div p select all p elements who are decedent of div element, whereas div > p select only child p elements, not grand child, great grand and so on.

<style>

  div p{ color:red }       /* match all p in div */
  div > p{ color:blue }    /* match only children p of div*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
   <p>para tag, child and decedent of p.</p>
</div>

For more information on CSS Ce[lectors and their use, check my blog, css selectors and css3 selectors

score 3 · Answer 7 · edited Jan 08 '17 at 02:07

3

html

<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>

css

div > p.some_class{
    color:red;
}

All the direct children that are <p> with .some_class would get the style applied to them.

edited Jan 08 '17 at 02:07

Let Me Tink About It

15,156
21
98
207

answered Dec 19 '13 at 15:15

Suraj Rawat

3,685
22
33

score 1 · Answer 8 · answered Jun 02 '20 at 04:27

1

The greater sign ( > ) selector in CSS means that the selector on the right is a direct descendant / child of whatever is on the left.

An example:

article > p { }

Means only style a paragraph that comes after an article.

answered Jun 02 '20 at 04:27

authentichigh

529
5
6

What does the ">" (greater-than sign) CSS selector mean?

8 Answers8

Linked

Related