How is the angle bracket character, ">" used in CSS?

Question

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?

Answer 1

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

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

Answer 2

Hi Sam, 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)

Answer 3

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

Answer 4

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

Answer 5

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>