192

I have seen this character a number of times in CSS files but I have no idea how its used. Can anyone explain it to me and show how they are useful in making a page style easier?

Sam Becker
  • 19,231
  • 14
  • 60
  • 80
  • BTW, > is normally know as "greater than" (or, strictly speaking wrongly, as right angle bracket). – Richard Apr 14 '09 at 08:35
  • 1
    Be aware that it requires Windows Internet Explorer 7 or later. Or FF or some modern browser. [http://msdn.microsoft.com/en-us/library/aa358819(VS.85).aspx](http://msdn.microsoft.com/en-us/library/aa358819(VS.85).aspx) – Vili Apr 14 '09 at 06:40
  • 1
    possible duplicate of [What does the ">" (greater-than sign) CSS selector mean?](http://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean) – TZHX May 05 '15 at 13:54

5 Answers5

251

It's a CSS child selector. P > SPAN means applying the style that follows to all SPAN tags that are children of a P tag.

Note that "child" means "immediate descendant", not just any descendant. P SPAN is a descendant selector, applying the style that follows to all SPAN tags that are children of a P tag or recursively children of any other tag that is a child/descendant of a P tag. P > SPAN only applies to SPAN tags that are children of a P tag.

J. Scott Elblein
  • 4,013
  • 15
  • 58
  • 94
tpdi
  • 34,554
  • 11
  • 80
  • 120
167
p em

will match any <em> that is within a <p>. For instance, it would match the following <em>s:

<p><strong><em>foo</em></strong></p>
<p>Text <em>foo</em> bar</p>

On the other hand,

p > em

Will match only <em>s that are immediate children of <p>. So it will match: 

<p>Text <em>foo</em> bar</p>

But not:

<p><strong><em>foo</em></strong></p>
Brian Campbell
  • 322,767
  • 57
  • 360
  • 340
9

this is known as a Child Combinator:

A child combinator selector was added to be able to style the content of elements contained within other specified elements. For example, suppose one wants to set white as the color of hyperlinks inside of div tags for a certain class because they have a dark background. This can be accomplished by using a period to combine div with the class resources and a greater-than sign as a combinator to combine the pair with a, as shown below:

div.resources > a{color: white;}

(from http://www.xml.com/pub/a/2003/06/18/css3-selectors.html)

Adam Alexander
  • 15,132
  • 5
  • 42
  • 41
4
E > F

Matches any F element that is a child of an element E.

more on http://www.w3.org/TR/CSS21/selector.html#child-selectors

Community
  • 1
  • 1
Tobias
  • 7,238
  • 10
  • 46
  • 77
0

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

Child combinator more info

Nick
  • 101
  • 4