CSS Grouping

The grouping of two selectors is defined with some rules in CSS.
These rules are referred to as CSS Grouping Rules.

CSS Selectors can be grouped in four:

Descendant Selector

The descendant selector matches all elements that are descendants of a specific element. Using (space) in between the descendants and ancestors selector.

Syntax

ancestor-selector descendant-selector {
/* CSS defintions */
  property: value;
}

The following example selects all <h1> elements inside <div> elements.

Child Selector

The child selector selects all elements that are the "immediate" (immediate means "first level") children of a specific element. Using the > symbol.

Syntax

parent-selector>child-selector {
/* CSS defintions */
  property: value;
}

The following example selects all <h1> elements that are immediate children of a <div> element.

Next Sibling Selector

The next sibling selector selects all elements that are the neighboring siblings of a specified element. Using the + symbol.

Sibling elements must have the same parent element, and immediately following the parent element.

Syntax

currentSibling-selector+nextSibiling-selector {
/* CSS defintions */
  property: value;
}

The following example selects all <h1> elements that are placed immediately after <div> elements.

Universal Sibling Selector

The universal sibling selector selects all elements that are siblings of a specified element. Using the ~ symbol.

Syntax

currentSibiling-selector~otherSiblings-selector {
/* CSS defintions */
  property: value;
}

The following example selects all <p> elements that are siblings of <div> elements:

What You Should Know at the End of This Lesson

• You should be able to tell briefly what CSS Familiarity is all about.
• You should be able to style a child selector with CSS.
• You should be able to style a selector that is an immediate sibling of a specified element.
• If you enjoyed this tutorial, please share.