'>' character in CSS

[AusQB]

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]

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

 

[adamblan]

... It can be used as a descendant selector when you're working with jQuery?

 

[SPZ]

What I know is that there isn't any < or > in CSS!

 

[AusQB]

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]

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:

#test > div{
  background:#ccc;
}

This does not work in IE6, however.

 

[AusQB]

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:

#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]

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:

#test > div{
  background:#ccc;
}

This does not work in IE6, however.

You are wrong, need only

#test  div{
  background:#ccc;
}

 

[AusQB]

You are wrong, need only

#test  div{
  background:#ccc;
}

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

 

[conor]

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:

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

 

[AusQB]

Oh I get it now.