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?
This question is related to
css
css-selectors
> selects all direct descendants/childrenA 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; }_x000D_
.a b { color: red; } /* every John is red */_x000D_
.b > b { color: blue; } /* Only John 3 and John 4 are blue */<div class="a">_x000D_
<p><b>John 1</b></p>_x000D_
<p><b>John 2</b></p>_x000D_
<b>John 3</b>_x000D_
<b>John 4</b>_x000D_
</div>_x000D_
_x000D_
<div class="b">_x000D_
<p><b>John 1</b></p>_x000D_
<p><b>John 2</b></p>_x000D_
<b>John 3</b>_x000D_
<b>John 4</b>_x000D_
</div>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.
It means parent/child
example:
html>body
that's saying that body is a child of html
Check out: Selectors
It is the CSS child selector. Example:
div > p selects all paragraphs that are direct children of div.
See this
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.
It declares parent reference, look at this page for definition:
Source: Stackoverflow.com