different selector for parent child in css

Question

What is the difference between:

li ul {color:red;}

and

li > ul {color:yellow;}

I try both and get the same result.

[Descendant combinator](http://www.w3.org/TR/css3-selectors/#descendant-combinators) - [Child combinator](http://www.w3.org/TR/css3-selectors/#child-combinators) — Musa, Nov 28 '13 at 19:06

score 1 · Answer 1 · answered Nov 28 '13 at 19:06

1

The first selector covers all ul inside li.

The second cover only the direct ul descendant inside li.

For more selectors tips, see this links

answered Nov 28 '13 at 19:06

1

There is no such thing as "child" and "direct child". You mean "descendant" and "child". – Felix Kling Nov 28 '13 at 19:08
Thank you, interesting page – hd. Nov 28 '13 at 19:20

score 1 · Accepted Answer · answered Nov 28 '13 at 19:07

The first selector is known as the Descendant combinator whereas the second one is the Child combinators

Descendant combinator

li ul {color:red;}

At times, authors may want selectors to describe an element that is the descendant of another element in the document tree (e.g., "an EM element that is contained within an H1 element"). Descendant combinators express such a relationship. A descendant combinator is whitespace that separates two sequences of simple selectors. A selector of the form "A B" represents an element B that is an arbitrary descendant of some ancestor element A.

Child combinators

li > ul {color:yellow;}

A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, >) character and separates two sequences of simple selectors.

different selector for parent child in css

2 Answers2