Search within TutorialsPark

CSS Combination Selectors

Apply CSS styles to some Combinations of Elements.

CSS Combination Selectors

1. Combination Selectors enable you to apply CSS styles based on its siblings and parents.

XYZ : Descendent Selector

X*Y : Universal Selector

X>Y : Direct Child

X+Y : Adjacent Sibling

X~Y : General Sibling

CSS : Descendent Selector xyz

1. To assign CSS styles to a whole group of Descendant Elements XYZ .

2. Inorder to create a descendant selector, the two selectors must be seperated by a space, ancestor first and followed by descendants.

3. Eg: #article p will apply CSS styles to element <p> which are descendants of an element with ID #article .

Example:CSS Descendent Selector

Give it a TRY! » Note:Above Example is of 2 level descendant, but you can have any number of descendant levels

CSS : Universal Selector x*y

1. A Universal Descendant selector is used to apply CSS styles to descendent element regardless of its parent.

2. Eg: For #article * span, contents of <span> within element with ID #article will be styled regardless of <span>'s parent element .

Example:CSS Universal Descendent Selector

Give it a TRY! » Note: Here, #article * is universal selector, and <span> is the descendent.

CSS: Direct Child Selector x>y

1. Used to apply CSS styles to elements that are immediate children(s) of the specified element and not grandchild descendents.

2. The Selector is created using a greater-than sign (>) between the parent and child selector. Eg: x>y

3. Eg: For selector body > p will select element <p> which are direct child of <body> element and not any grand-children.

Example:Direct Child Selector

Give it a TRY! » Note: In the above example the element <p> within <div id="article"> is a grand-child, hence not selected.

CSS: Adjacent Sibling Selector x+y

1. Adjacent Sibling selector applies CSS styles to elements only if it's adjacent to the specified element.

2. To create the Selector a symbol " + " is used between the two selectors.

3. 3. Eg: h1 + p will select only the first <p> following the <h1> element, all other non-adjacent elements will not be Selected.

Example: Adjacent Sibling Selector

Give it a TRY! » Note: Only the immediate sibling will be selected.

CSS: General Sibling Selector x~y

1. To apply CSS styles to all sibling elements that occur after the first Sibling, not just the immediate one .

2. To create the selector use symbol " ~ " between the two selectors.

3. Eg: h1 ~ p will select all <p> elements following the <h1> element, and not just the first <p>.

Example: General Sibling Selector

Give it a TRY! » Note: h1 ~ p targets all siblings, while h1 + p selects only the sibling immediate to h1 .