Code has been added to clipboard!

CSS Combinators in a Nutshell: Master CSS Child Selectors and More

CSS Combinators

CSS syntax principles are rooted in two fundamental elements: CSS selectors and declaration blocks. CSS selectors allow us to choose an HTML element we want to style while declaration block describes how we will design it. Using individual selectors, their classes, IDs, and grouping is effective in some cases but in others, you need to take one step further.

In this tutorial, you will discover what this next step is. You will learn how to use CSS combinators. What they do is allow us to select HTML elements according to their relationships. I will introduce you to CSS child selectors, CSS sibling selectors, and CSS descendant selectors.

You will understand what type of relationship all of these selectors imply as well as how to use them. Furthermore, you will be able to see them work in action and play around with them using the interactive BitDegree's editor.

Let's explore the world of CSS child selectors, descendant selectors, and sibling selectors and learn how to write code faster!

CSS Combinators: Main Tips

  • A combinator explains the selectors' relationship
  • A single selector can define two or more simple CSS selectors. A combinator can be included in between them
  • There are four types of combinators:
    • CSS child selector - to choose all children elements of a parent HTML element use greater-than sign (>)
    • CSS descendant selector - to choose all descended elements of an ancestor HTML element leave a space ( )
    • CSS general sibling selector - to choose all general sibling elements of a specified HTML element use a tilde (~)
    • CSS adjacent sibling selector - to choose all adjacent sibling elements of a specified HTML element use a plus symbol (+)

The best way to learn about something is from an example. Hence, in the following part of this tutorial, you will discover what each type of CSS selectors and combinators do an see how they are used in CSS code.

We'll start with CSS child selectors who have the closest bond to the first specified elements, then move on to descendant selectors and lastly, we'll explore two types of CSS sibling selectors.

CSS Child Selector

As mentioned before the CSS child selector is indicated by a combinator in a form of a > sign. The first specified element is the parent element, and the one after the sign is a child element of it. Hence using the combination of parent and children elements, we will only select the HTML elements which match the second indicator and are the children elements of the first one.

In the below example we are selecting all <p> elements that are direct children of the <div> element:

Example
div > p {
    background-color: lightblue;
}

CSS Descendant Selector

The combinator for CSS descendant selectors is a space character. The first HTML element is the ancestor and the second one the descendent. The relationship of CSS descendant selectors is less strict than CSS child selectors. With descendant selectors, we will be able to choose all elements which match the second indicator, and the first element is their ancestor.

In this example, we select all <p> elements inside <div> elements:

Example
div p {
    background-color: lightblue;
}

CSS General Sibling Selector

The combinator ~ is used to imply the sibling relationship between the elements. The first element is the first selected sibling and the second indicator describes all following sibling elements for which the styling properties will be applied.

In this example, we are selecting all <p> elements that are siblings of <div> elements:

Example
div ~ p {
    background-color: lightblue;
}

CSS Adjacent Sibling Selector

The + combinator is used to identify and select all specified element adjacent siblings. Sibling elements have the same parent element, and adjacent means immediately following. Hence, the principle of adjacent siblings is similar to the general sibling one. But in this case, we only select the first elements which are following the indicated element and are its siblings.

In this example, we select <p> elements that follow the <div> elements:

Example
div + p {
    background-color: lightblue;
}