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?
3
-
1Be 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).aspxVili– Vili2009-04-14 06:40:02 +00:00Commented Apr 14, 2009 at 6:40
-
BTW, > is normally know as "greater than" (or, strictly speaking wrongly, as right angle bracket).Richard– Richard2009-04-14 08:35:41 +00:00Commented Apr 14, 2009 at 8:35
-
1possible duplicate of What does the ">" (greater-than sign) CSS selector mean?TZHX– TZHX2015-05-05 13:54:11 +00:00Commented May 5, 2015 at 13:54
Add a comment
|
5 Answers
It's a CSS child selector. P > SPAN means apply 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.
1 Comment
wheresrhys
A note of caution though - it's not supported in ie6
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>
1 Comment
J. Scott Elblein
Nice, clear example. although tpdi's answer was helpful, this one really made it easier to understand.
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)
Comments
E > FMatches any F element that is a child of an element E.
more on http://www.w3.org/TR/CSS21/selector.html#child-selectors
Comments
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.
