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 - Selects elements that are descendant to a specific element (space)
  • child selector - Selects elements that are immediate child to a specific element (>)
  • next sibling selector - Selects element that is the next to a specific element (+).
  • universal sibling selector - selects all elements that are a sibling to a specific element (~).

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.

Example

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.

Example

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.

Example

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:

Example

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.