When to use `>` sign in CSS?

Question

Possible Duplicate:
What does “>” mean in CSS rules?

I came across many many websites and I saw many of them use this type of notation in their css file for creating navigation bar like :

#navigation ul li > ul {
  /* some code in between */
}

but when i omit the > sign as

#navigation ul li ul {
  /* some code in between */
}

this still works the same way.

what is the difference and when to use > sign ?

Answer 1

> Means the direct child of a selector, so

li > a will ONLY match an <a> which is directly inside an <li> for example.

If the html was <li><span><a> the <a> would not be matched.

Removing the > will match any <a> nested inside an <li>, irrespective of other things around it, so li a would match the <a> in

<li><a> but also in <li><span><a>, for example.

Here's more information on direct Child selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Answer 2

The > means a child element - it is the child selector. That is, directly / immediately nested after.

So, in your first example, the ul at the end of the selector must be directly descending from the li.

Answer 3

The "li > ul" syntax specifies that the ul must be a child of li. "li ul" instead says that the the styled ul is descendant of li, no matter how many levels below.

Answer 4

selector[1] > selector[2]{ 
[property]: value 
}

This is called the child selector. In browsers that support it, it applies the styles to selector2 child elements of selector1.

Edit:
The second one you use I believe is called the Descendant selectors.

They should work identically, but it's there's a little difference. The decendant selector will apply to ALL decendants ,whereas the child selector applies only to the direct children of the parent.

Answer 5

You would use > when you want to target a direct descendant.

For example, .foo > .bar would target .bar only if it is the direct child, while .foo .bar would target any descendant of .foo that has the class .bar.

Answer 6

> is to be used when the second operand/element is a child of the first operand/element. When it's omitted; descendants are matched, which includes children.

---

Therefore, if your HTML is structured as you suggested (#navigation ul li ul) then if you have the following in your CSS:

#navigation ul {color:red;}

Then both #navigation ul AND #navigation ul li ul will be coloured red (the text) as they BOTH are descendants of #navigation ul.

But if you had the following in your CSS:

#navigation > ul {color:red;}

Then only #navigation ul would be coloured red as it is the only ul which is a direct child of #navigation

Answer 7

> is the child selector.

It will only select immediate children of the previous element. If it there is a

#navigation ul li ul li ul

element it will not be affected by the

#navigation ul li > ul

selector. But the

#navigation ul li ul

will be.

---

EDIT: @Nix is right, but he isn't telling the whole truth it seems. *Why isn't the p-enclosed ul ignored but only the span-enclosed? display: block vs inline perhaps? Who knows?

Answer 8

The ">" selector is the child selector, space is the descendant selector. If tag3 is inside of tag2, which is inside tag1, and you use a child selector, then your css rule won't apply to tag3 if you refer to tag3 inside of tag1, however, if you use the descendant selector, tag3 will be transitively inside tag1. This means that he descendant selector is more general than the child selector.

#navigation ul li > ul {
  /* some code in between */
}

is more specific than

#navigation ul li ul {
  /* some code in between */
}

because between the li tag inside the ul tag inside the tag with the id of navigation needs ul to be a direct child in the first example and in the second example ul doesn't need to be directly the child of li, li might have a child which is the parent of ul.