Tech Notes

CSS Combinators - An Overview

Photo by Jeremy Bishop on Unsplash

CSS Combinators - An Overview

4 types of CSS Combinators explained with examples

Fields Marshall's photo
Fields Marshall
·

4 min read

First, a quick review of selectors. CSS selectors define which elements you want to style. There are three types of CSS selectors: element, id and class.

nav {
  /* Here we have an element selector - making text blue in
    this section */
   color: blue;
}

#standout {
    /* here we have an ID selector making the element 
    tagged with the id of standout  have a dotted red border */
    border: 1px dotted red;
}

.pink {
     /* here we have a class selector making all elements
     with class="pink" have a pink background */
    background-color: pink;
}

CSS combinator selectors help us to specify the exact element we would like to select based on the specific relationship between each selector. The term "combinator" refers to the character we use to combine CSS selectors. A few examples are in order.

Note: there are four different combinators in CSS as of this writing.

  • descendant selector (space)

  • child selector (>)

  • adjacent sibling selector (+)

  • general sibling selector (~)

nav p { background-color: green; }
/* descendant selector (space)   target all elements that are
descendants of a specified element. all p tags found in a nav*/

/* child selector  (>)   target all elements that are the 
 children of a specified element.    */
nav > p { background-color: purple;}

/* Adjacent sibling selector (+) target all elements 
immediately following another element.
Siblings have the same parent element  */ 
nav + p { background-color: red;}

/* General sibling selector (~) target all elements that 
share the same parent and come after the first specified element
*/
nav  ~ p {
  background-color: yellow;
}

4 Types of CSS Combinators

  • Descendant Combinator (space)

    • Definition and Symbol Representation: A descendant combinator, represented by a space, selects all elements that are descendants of a specified element.

    • Example of Usage: div p { color: red; } — This rule selects all <p> elements inside <div> elements and colors them red.

    • Practical Applications and Scenarios: Use this when you want to target elements nested at any level within another element.

  • Child Combinator (>)

    • Definition and Symbol Representation: A child combinator, symbolized by >, selects all elements that are the direct children of a specified element.

    • Example of Usage: div > p { font-weight: bold; } — This rule targets only the <p> elements that are direct children of <div> elements, making their text bold.

    • Practical Applications and Scenarios: Ideal for when you want to affect only the immediate child elements and not elements nested further.

  • Adjacent Sibling Combinator (+)

    1. Definition and Symbol Representation: This combinator, indicated by +, targets an element that is directly after (and at the same level as) the first specified element.

    2. Example of Usage: h2 + p { margin-top: 20px; } — This gives a top margin to a <p> element that directly follows an <h2> element.

    3. Practical Applications and Scenarios: Useful when you want to style an element based on its preceding sibling, such as adding spacing or modifying typography.

  • General Sibling Combinator (~)

    1. Definition and Symbol Representation: Represented by ~, this combinator targets all elements that share the same parent and that come after the first specified element.

    2. Example of Usage: h2 ~ p { text-indent: 50px; } — This indents all <p> elements that follow an <h2> under the same parent.

    3. Practical Applications and Scenarios: When you have multiple siblings and you wish to style all those that follow a specific element.

CSS Combinator Considerations and Tips

  • You are not limited to using a single combinator. They can be chained together for a more detailed selection. For example, div + p > span selects a <span> inside a <p> that directly follows a <div>.

  • Keep specificity in mind: More specific selectors have higher priority. Ensure your styles don't get overridden unintentionally. This ties into the next tip. Most likely you will want to keep combinators simple.

  • Keep It Simple and Avoid overusing or overcomplicating selectors: Simplify for maintainability and better performance.

Resources for CSS Combinators

CSScombinators