'>' character in CSS

AusQB

New Member
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.
 

vntux

New Member
"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 ">"
 

AusQB

New Member
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.
 

conor

New Member
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.
 

AusQB

New Member
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.

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

Is it just an old convention that got phased out?
 

vntux

New Member
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.

You are wrong, need only

Code:
#test  div{
  background:#ccc;
}
 

conor

New Member
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!
 
Top