0

I'm confused about this two selector in css

In W3schools CSS Selector Reference said:

element element like div p : Selects all <p> elements inside <div> elements

and

element>element like div > p : Selects all <p> elements where the parent is a element

what's difference between this two definition?

Miller
  • 105
  • 1
  • 2
  • 11
  • 2
    > is a direct children selector – Bhojendra Rauniyar Sep 02 '14 at 07:29
  • CSS & jQuery selector almost similar look less than `(>)` how to work http://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean – Girish Sep 02 '14 at 07:31
  • See: http://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors?rq=1 – Guffa Sep 02 '14 at 07:32
  • can you explain more about this? what's direct children selector? – Miller Sep 02 '14 at 07:32
  • A similar question http://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors?rq=1 – sri Sep 02 '14 at 07:32
  • @user3087607: Here is a simple [fiddle](http://jsfiddle.net/01e09ak6/) to visually see the difference. `>` selects only the `p` element that is directly under the `div` and not nested within a different parent. – Harry Sep 02 '14 at 07:34
  • thanks, i think i figured out what's difference between these two selector. but 'div + p' seems to be similar to 'div>p' . what's difference between these two selector? – Miller Sep 02 '14 at 07:38
  • @user3087607: `+` is a sibling selector. It selects a `p` that directly follows a `div` tag. [Demo](http://jsfiddle.net/01e09ak6/1/) – Harry Sep 02 '14 at 07:41

1 Answers1

2
E F Matches any F element that is a descendant of an E element.
E > F   Matches any F element that is a child of an element E.

You may be more clearer from this picture:

enter image description here

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231