How is the "greater than" or ">" character used in CSS?

Question

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.

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>

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)

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