Delphinidin

- Selecting Page Elements by Using Parent-Child Selectors
Parent-child selectors are a useful way to select elements within your page, when tag, CSS, and ID elements cannot be used. The parent-child CSS property is available in CSS to all popular browsers except IE6. Are you surprised? I'm not, but the beauty of using this CSS selector with jQuery is that IE6 is supported. The parent-child selector can be very useful when working with nested elements such as navigation menus.

The parent-child selector allow you to select direct descendents of a given parent element using the > operator. Consider the following jQuery example. This statement selects all of the paragraph (p) elements found within the body as long as they are a child (that is, nested inside of the body tag):

$('body > p')

But if you had a scenario where you were trying to select a specific paragraph element inside of a specific div element, you would have to be more specific by using their class or ID names in order to select the correct descendent element.

- Selecting Page Elements by Using Descendent Selectors Parent-child selectors only work if the child is directly related to the parent, like <li> tags that are between two <ul> tags. If you run into a situation where you are trying to select an element that is two or three levels down from the parent, you need to use descendent selectors. The difference between the parent-child and descendent selector is the usage of the > operator — if this operator is not included, the selector matches not only child but also descendent elements.

Read Again:
How to Selecting Page Elements by Using CSS Selectors with jQuery - Part 1