What does the “>” do in css?

[andandandandrew]

Hi everyone. I just joined up. I’m a senior in the communication design department at The Cleveland Institute of Art and I am redoing my portfolio site right now.

I’m using the jQuery plugin Flexslider on my home page and I want to be able to use divs and be able to style my slides a little more than the basic list format it is set up as default.

Looking through the jQuery file I came across this:

slider.slides = $('.slides > li', slider);

and in the css this:

.flexslider .slides > li

I have never encountered the greater than sign in css before. I was hoping someone could shed some light on what it means. I suspect it’s parent and child elements, but I may be completely wrong. I think if I have a better understanding of what the “>” does I’ll be able to edit the jQuery and css files to make it do what I want.

Thanks!

[Senff]

It refers to direct children of certain elements only. Example:

Option 1


Option 2


Option 3



Option 4


Option 5






Option 6

The selector .flexslider .slides > li will only target the LI’s that are DIRECT descentdants of .slides, hence the ones with option 1, 2, 3 and 6. The other 2 LI’s (the ones with option 4 and 5) are descendants of a UL within an LI, so not direct LI’s of .slides.

Without the greater than-sign, all 6 LI’s would be targeted, of course.

Visit http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ for a lot more of this stuff.

[joshuanhibbert]

Exactly what @Senff said. If I could give him star, I would.

[IrishFaithful]

> doesn’t work in ie6, and I just want to chime in that css selectors are not very efficient.

CSS-Tricks Post on Efficiently Rendering CSS

[joshuanhibbert]

@IrishFaithful IE6 o.O

Also, your statement isn’t very clear. CSS selectors are what we use to style our documents. The only way we can avoid using selectors is to avoid using CSS. I can only assume that you actually meant ‘descendant’ selectors? Descendant selectors are the least effective way to target an element (in terms of speed), so using the child combinator (>) is actually quicker.

[andandandandrew]

Thanks all. Super helpful. That net.tuts link is a great resource. Bookmarked!

[Author]

Posts