CSS '>' selector; what is it? [duplicate]

Question

I've seen the "greater than" (>) used in CSS code a few times, but I can't work out what it does. What does it do?

Rendon

Check these references :https://www.w3.org/TR/CSS21/selector.html%23id-selectors, https://web.dev/learn/css/selectors/ – Teredo

Answer 1

> selects immediate children

For example, if you have nested divs like such:

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

and you declare a css rule in your stylesheet like such:

.outer > div {
    ...
}

your rules will apply only to those divs that have a class of "middle" since those divs are direct descendants (immediate children) of elements with class "outer" (unless, of course, you declare other, more specific rules overriding these rules). See fiddle.

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}

<div class='outer'>
  div.outer - This is the parent.
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
</div>

<p>Without Words</p>

<div class='outer'>
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

Side note

If you, instead, had a space between selectors instead of >, your rules would apply to both of the nested divs. The space is much more commonly used and defines a "descendant selector", which means it looks for any matching element down the tree rather than just immediate children as the > does.

NOTE: The > selector is not supported by IE6. It does work in all other current browsers though, including IE7 and IE8.

If you're looking into less-well-used CSS selectors, you may also want to look at +, ~, and [attr] selectors, all of which can be very useful.

This page has a full list of all available selectors, along with details of their support in various browsers (its mainly IE that has problems), and good examples of their usage.

Daiseydaisi

@JamWaffles - I've added more info, along with a link to Quirksmode.org which should help your research. – Daiseydaisi

Neat! Thanks for the link. I already use the [attr] selector in a few of my projects. I'll look into + and ~ too. – Rendon

...and by 'current', he means every browser your visitors use... unless, of course, you don't have more than 2% of your users using IE6 – Recha

@JamWaffles - if you're using [attr] then you're safe with > and '~' because browser support for those three is about the same. '+' is a bit flaky in IE7+8 but is usable. – Daiseydaisi

@Daiseydaisi , The quirksmode page you linked, does not say anything about these selectors. – Chanell

@Chanell - it did at the time; the quirksmode site layout has changed in the interim. The new link is quirksmode.org/css/selectors. I'll update the link in the answer. – Daiseydaisi

I feel a user can look at this example and walk away thinking that > will select the very immediate child. I think the example above can be improved by showing multiple immediate children being affected. – Archaeopteryx

Urge was too real. Made a bunch of edits and added in the fiddle. – Archaeopteryx

So what does > do? – Suave

It is worth to notice that > looks only ONE level down the markup structure and not further deep down. – Manoff

Answer 2

> selects all direct descendants/children

A space selector will select all deep descendants whereas a greater than > selector will only select all immediate descendants. See fiddle for example.

div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */

<div class="a">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

<div class="b">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

Recha

+1 The only example showing the difference between the whitespace combinator and the > combinator. You may want to give div>b a different color to better illustrate the difference though. – Cimabue

@Adam Kiss: Don't worry, over time as votes accumulate I believe you'll be on your way to Populist... check back next year :D – Cimabue

@Adam Kiss - don't worry; you still scored more rep points than I did. (and I voted for your answer too, so no hard feelings, eh?) – Daiseydaisi

+1 for to the point. demo: codepen.io/krish4u/pen/jpKhG – Godewyn

@AdamKiss > for whatever reason "direct descendant/child" sounds to me like the very immediate child (singular). However, `>' refers to all direct descendants/children. – Archaeopteryx

It is worth to notice that > looks only one level down the markup structure and not further deep down. – Manoff

Answer 3

It is the CSS child selector. Example:

div > p selects all paragraphs that are direct children of div.

See this

Intervocalic

Answer 4

As others have said, it's a direct child, but it's worth noting that this is different to just leaving a space... a space is for any descendant.

<div>
  <span>Some text</span>
</div>

div>span would match this, but it would not match this:

<div>
  <p><span>Some text</span></p>
</div>

To match that, you could do div>p>span or div span.

Homothallic

Answer 5

It declares parent reference, look at this page for definition:

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

Prosy

sidenote: You trust w3schools? oops. Read w3fools.com – Eroto

No I do not trust w3schools, but occasionally they do get it right ;) But if you have a better link explaining parent references I would be more than happy to recommend that instead, when I wrote this I had not realized w3schools errors yet :P – Scrawly

w3.org/TR/CSS2/selector.html#child-selectors – Eroto

Answer 6

It is a Child Selector.

It matches when an element is the child of some element. It is made up of two or more selectors separated by ">".

Example(s):

The following rule sets the style of all P elements that are children of BODY:

body > P { line-height: 1.3 }

Example(s):

The following example combines descendant selectors and child selectors:

div ol>li p

It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.

Nerissa

Answer 7

It means parent/child

example:

html>body

that's saying that body is a child of html

Check out: Selectors

Gaiter