Is There A Previous Sibling Selector In CSS And How To Select

CSS does not have a native selector specifically for selecting the previous sibling of an element. CSS selectors primarily focus on selecting elements based on their relationship with other elements in the document, but there isn’t a direct “previous sibling” selector.

You can achieve similar effects by using the general sibling combinator (~) or the adjacent sibling combinator (+).

However, keep in mind that these combinators will not precisely select the “previous” sibling; instead, they select elements that come after the specified element or you can say that they select next siblings.

Table of Contents #
  1. CSS general & adjacent sibling combinator
  2. Why is there no previous sibling selector in CSS?
  3. Easily Select the Previous Sibling using JavaScript

Example of the CSS general & adjacent sibling combinator:

General Combinator (~)

~ select all elements that are siblings of a specified element and share the same parent.

<style>
    .element {
        border: 1px solid red;
    }

    .element ~ .sibling {
        border: 1px solid blue;
    }
</style>

<div>
    <p class="sibling">Sibling 1</p>
    <p class="element">The Element</p>
    <p class="sibling">Sibling 2</p>
    <p>Sibling 3</p>
    <p class="sibling">Sibling 4</p>
</div>
<p class="sibling">Hello World</p>
CSS General sibling combinator sibling example

Adjacent Combinator (+)

+ select an element that is immediately preceded by a specific element.

<style>
    .element {
        border: 1px solid red;
    }

    .element + .sibling {
        border: 1px solid blue;
    }
</style>

<div>
    <p class="sibling">Sibling 1</p>
    <p class="element">The Element</p>
    <p class="sibling">Sibling 2</p>
    <p>Sibling 3</p>
    <p class="sibling">Sibling 4</p>
</div>
<p class="sibling">Hello World</p>
CSS adjacent sibling combinator sibling example

Why is there no previous sibling selector in CSS?

The absence of a direct previous sibling selector in CSS is rooted in the language’s design philosophy and the priorities of web styling.

  • Performance and Simplicity: CSS is designed to be a lightweight, efficient styling language. Introducing a previous sibling selector could potentially complicate the selector matching process, especially in larger documents, leading to performance issues. Keeping the language simple and predictable has been a key consideration.
  • Forward Rendering: The structure of HTML and CSS encourages a forward rendering approach. Styles are applied based on the natural flow of the document, from top to bottom. The lack of a previous sibling selector encourages developers to structure their HTML and CSS in a way that aligns with this flow, promoting cleaner and more maintainable code.
  • Encouraging Best Practices: CSS encourages best practices in document structure. Instead of relying on complex selectors, it promotes the use of meaningful class names, IDs, and other attributes to style elements. This separation of concerns makes the code more readable and maintainable.
  • JavaScript for Dynamic Interactions: While CSS is primarily responsible for styling static documents, dynamic interactions and more complex behaviors are often handled by JavaScript. If you need to select elements based on their relationship in the DOM tree or perform more complex styling based on dynamic conditions, JavaScript is a more appropriate tool.

Easily Select the Previous Sibling using JavaScript

In JavaScript, you can select the previous sibling of an element using the previousElementSibling property. This property returns the previous sibling element (ignoring text nodes and other non-element nodes). Here’s an example:

<p>Previous Sibling</p>
<p class="element">Target Element</p>
<p>Next Sibling</p>

<script>
    // Assuming you have a reference to the current element
    const currentElement = document.querySelector('.element');
    currentElement.style.border = '1px solid red';
    // Select the previous sibling
    const previousSibling = currentElement.previousElementSibling;

    // Check if a previous sibling exists before performing actions
    if (previousSibling !== null) {
        // Do something with the previous sibling
        previousSibling.style.border = '1px solid blue';
    } else {
        console.log('No previous sibling found.');
    }
</script>
Select the Previous Sibling using JavaScript