Wednesday, April 6, 2011

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

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?

From stackoverflow
  • 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

    wheresrhys : A note of caution though - it's not supported in ie6
    CrazyJugglerDrummer : @wheresrhys story of my life...... :)
    Andy Ford : Splitting hairs here, but it's worth pointing out that a P element should never be inside a SPAN element since you cannot nest block level elements inside of inline level elements. `P > SPAN` would be a better example.
  • 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)

  • 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

  • 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

  • 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>
    

0 comments:

Post a Comment