By Misha Moroshko


2010-07-12 04:33:08 8 Comments

For example:

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

What exactly does the > sign mean?

8 comments

@BoltClock 2010-07-12 04:35:44

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

That means the selector div > p.some_class only selects paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within.

An illustration:

div > p.some_class { 
    background: yellow;
}
<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

What's selected and what's not:

  1. Selected
    This p.some_class is located directly inside the div, hence a parent-child relationship is established between both elements.

  2. Not selected
    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.

    Consequently, while div > p.some_class won't match this element, div p.some_class will, using the descendant combinator instead.


1 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".

@alex 2010-09-08 01:31:02

+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.

@BoltClock 2010-09-08 01:33:06

@alex: yes :) #something a could mean a is a grandchild or great^n grandchild of #something (it doesn't take into account depth of nesting).

@alex 2010-09-08 01:45:46

Well I mean it is still a child... a grandchild maybe :P

@robertc 2011-01-09 23:31:03

@alex it's called the child combinator, the space is called the descendent combinator

@Quentin 2014-09-16 09:34:49

When someone is their grandparent's child, we're dealing with a really nasty instance of incest. Happily, that is impossible in HTML.

@AndrewL64 2015-08-08 21:52:30

Flagging this thread on suspicion of promoting textual pedophilia and incest (kidding)

@Eoin 2015-11-24 10:48:57

Annoying or not to call it a direct child it makes it instantly clear to the uneducated, I think it's a good description.

@BoltClock 2015-11-24 13:08:12

I don't hear any laymen calling their kids their direct children for the sake of clarity.

@Quentin 2016-10-07 11:39:49

The term "direct" is pretty confusing. In other areas 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).

@BoltClock 2016-10-07 11:43:50

@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"...

@Quentin 2016-10-07 11:45:34

@BoltClock — Maybe "the child combinator, sometimes mistakenly called the direct descendant combinator"?

@redfox05 2016-11-15 17:40:49

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 2016-11-15 17:42:31

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 2016-11-15 17:43:27

I would say: "> is the child combinator/direct descendant, sometimes mistakenly called the direct child combinator"

@BoltClock 2016-11-15 17:48:30

@redfox05: See Quentin's comments just above yours.

@authentichigh 2020-06-02 04:27:05

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.

@Premraj 2017-02-13 00:49:46

> (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:

  1. descendant selector (space)
  2. child selector (>)
  3. adjacent sibling selector (+)
  4. general sibling selector (~)

Note: < is not valid in CSS selectors.

enter image description here

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:

enter image description here

More information about CSS Combinators

@YCode 2019-02-12 23:14:13

@premraj Thank you for the excellent explanation of parent-child css selectors!

@YCode 2019-02-12 23:18:59

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?

@Avinash Malhotra 2017-01-14 17:01:58

( child selector) was introduced in css2. div p{ } select all p elements decedent of div elements, whereas div > p selects only child p elements, not grand child, great grand child on so on.

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

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

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

@suraj rawat 2013-12-19 15:15:37

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.

@tschaible 2010-07-12 04:34:52

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

@Dagg Nabbit 2010-07-12 04:37:43

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

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

@Misha Moroshko 2010-07-12 04:46:57

Thank you very much for the link ! I discovered also the "Adjacent sibling selectors" there.

@FelipeAls 2010-07-12 04:59:06

You'll find browser support 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

@dan04 2010-07-12 04:35:18

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

Related Questions

Sponsored Content

33 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 2142681 View
  • 3290 Score
  • 33 Answer
  • Tags:   css css-selectors

17 Answered Questions

[SOLVED] CSS selector for first element with class

  • 2010-04-26 22:51:13
  • Rajat
  • 1067108 View
  • 996 Score
  • 17 Answer
  • Tags:   css css-selectors

7 Answered Questions

[SOLVED] Sass Variable in CSS calc() function

  • 2013-07-31 22:30:09
  • GJK
  • 471110 View
  • 1435 Score
  • 7 Answer
  • Tags:   css sass css-calc

10 Answered Questions

[SOLVED] Which characters are valid in CSS class names/selectors?

  • 2009-01-15 23:37:39
  • Darryl Hein
  • 385963 View
  • 1228 Score
  • 10 Answer
  • Tags:   css css-selectors

11 Answered Questions

[SOLVED] What does the "+" (plus sign) CSS selector mean?

  • 2009-07-16 19:26:50
  • gday
  • 320415 View
  • 770 Score
  • 11 Answer
  • Tags:   css css-selectors

5 Answered Questions

[SOLVED] What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

  • 2012-05-28 09:10:00
  • Akshat
  • 275611 View
  • 886 Score
  • 5 Answer
  • Tags:   css css-selectors

5 Answered Questions

[SOLVED] What does !important mean in CSS?

  • 2012-02-12 00:32:51
  • Itay Moav -Malimovka
  • 681635 View
  • 424 Score
  • 5 Answer
  • Tags:   css

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

  • 2014-05-09 16:16:57
  • Mathew MacLean
  • 262955 View
  • 2864 Score
  • 19 Answer
  • Tags:   javascript html css

1 Answered Questions

[SOLVED] CSS Selector that applies to elements with two classes

  • 2010-09-22 18:06:16
  • Adam
  • 276368 View
  • 487 Score
  • 1 Answer
  • Tags:   css css-selectors

Sponsored Content