'>' character in CSS

Discussion in 'Web Design' started by AusQB, May 1, 2009.

to remove all ads.
  1. AusQB

    AusQB New Member

    Messages:
    167
    Can someone explain how the > character is used in CSS definitions?

    eg. ul#nav > li:hover > ul {/*some attributes*/}


    I assume it has something do with affecting parent elements.
     
  2. vntux

    vntux New Member

    Messages:
    10
    "eg. ul#nav > li:hover > ul {/*some attributes*/}"??

    Where did you found??

    in usual, css will be write: ul#nav li:hover ul{/*some attributes*/}

    not use ">"
     
  3. adamblan

    adamblan New Member

    Messages:
    234
  4. SPZ

    SPZ New Member

    Messages:
    5
    What I know is that there isn't any < or > in CSS! :eek:
     
  5. AusQB

    AusQB New Member

    Messages:
    167
    The Arsenal website makes use of this strange convention in its dropdown nav menu. If you have some sort of source viewer, such as Firebug, look near the bottom of the nav.css file.
     
  6. conor

    conor New Member

    Messages:
    348
    It is valid and very usefull CSS. If you have a div named test and you want all the direct descendant divs from test to have certain style then you use it. For example:

    Code:
    #test > div{
      background:#ccc;
    }
    
    This does not work in IE6, however.
     
  7. AusQB

    AusQB New Member

    Messages:
    167
    That just seems redundant. Obviously the same is true if you remove the >.

    Is it just an old convention that got phased out?
     
  8. vntux

    vntux New Member

    Messages:
    10
    You are wrong, need only

    Code:
    #test  div{
      background:#ccc;
    }
    
     
  9. AusQB

    AusQB New Member

    Messages:
    167
    He knows that. We're just establishing the fact that, while the > character is valid, it is no longer necessary.
     
  10. conor

    conor New Member

    Messages:
    348
    No the > character is not redundant and it does not have the same effects as a space. Let me try and explain it better. With the code I gave above only direct descendants of #test are affected where as with a space all descendants are affected. For example:

    Code:
    <div id='test'>
      <div id='first'>
        <div id='second'>
        </div>
      </div>
    </div>
    
    In the example above with the CSS I posted earlier only the 'first' div inherits the style. The second is not subject to any style - which would be the case with a space in the CSS. Only direct descendants are affected so it is not by any means out of date, in fact it is new enough not to work in IE6!
     
  11. AusQB

    AusQB New Member

    Messages:
    167
    Oh I get it now.
     

Share This Page