Introduction and examples of CSS3 descendant selectors and sibling selectors

The CSS Selector Level 3 specification defines some connection selectors (or combination selectors) related to the document hierarchy.

Divided into descendant selectors (descendant Combinator/child combinators) and sibling selectors (Sibling combinators):

The descendant selectors are divided into the following 3:

1. Spaces. Div p: Indicates that P is the descendant element of the Div, and the div is the ancestor of P. The selector selects the P descendant elements under all Div.

2. Arrows (>). Represents a direct relationship. div > P represent the elements of the div's son generation.

3. asterisk (*). Represents an alternate generation relationship. DIV * P represents the grandson and the following elements of the Div.

Online Example: http://wow.techbrood.com/fiddle/15759

The sibling selector can be divided into the following 2:

1. plus sign (+). Represents a relationship that follows. H1 + H2: Represents the H2 element immediately following the H1.
2. Wave number (~). Represents a successor relationship. H1 ~ H2: Represents a subsequent H2 element that is under the same parent element as the H1 element (the middle can be separated by other elements).

Online Example: http://wow.techbrood.com/fiddle/15761

About the CSS3 selector reference read:

Http://techbrood.com/Guide/h5b2a?p=css-selectors

Http://techbrood.com/Guide/h5b2a?p=css-pseudo-classes

by Iefreer

Introduction and examples of CSS3 descendant selectors and sibling selectors