How To Select Previous Element Of The Selected Element

Selecting elements relative to a known element is a common requirement in web development. Whether you need to style a previous sibling based on its successor, programmatically access neighboring elements, or build interactive UI components that respond to element relationships, understanding how to traverse the DOM backward is essential. This guide covers both modern CSS techniques and JavaScript approaches for selecting previous elements.

The CSS Solution: The :has() Pseudo-Class

The CSS :has() pseudo-class revolutionized how we select elements in CSS by introducing true relational selectors. Before its widespread adoption, CSS could only select forward--using the adjacent sibling combinator (+) or general sibling combinator (~) to target elements that came after a reference element.

Understanding the :has() Selector

The :has() pseudo-class represents an element if any of the relative selectors passed as arguments match at least one element when anchored against that element. For selecting previous elements, the key insight is that instead of asking "select element A," you ask "select element A when followed by element B."

The syntax follows this pattern: target:has(selector) where selector describes what follows the target. For example, to select an h2 that is immediately followed by an h3, you would write h2:has(+ h3). This reads as "select all h2 elements that have an immediately following h3," which accomplishes what developers have long wanted--a way to style elements based on their successors. As documented in the MDN Web Docs on CSS :has(), this selector enables selection patterns that were previously impossible in pure CSS.

The JavaScript Solution: previousElementSibling Property

While CSS provides powerful selector capabilities, JavaScript offers more programmatic control through the DOM API. The previousElementSibling property returns the element immediately prior to the specified element in its parent's children list, or null if the element is the first in the list. This read-only property has been widely available across browsers since July 2015, making it a reliable choice for element traversal.

Using previousElementSibling in Practice

The previousElementSibling property works on any Element node and returns the nearest preceding sibling element, skipping text nodes and comments. Unlike previousSibling, which returns any node type including text nodes and comment nodes, previousElementSibling returns only Element nodes, making it more predictable for DOM manipulation tasks. The MDN Web Docs on previousElementSibling provide comprehensive documentation with examples showing sibling traversal patterns.

For most DOM manipulation tasks where you want to work with actual HTML elements, previousElementSibling is the preferred choice. This distinction becomes critical when working with inline elements that might contain text, where previousSibling often returns text nodes containing whitespace. Using the Element variants eliminates these whitespace-related surprises and makes your code more predictable.

Best Practices for Element Selection

Effective element selection combines the right technique with clean, maintainable code. When using :has(), prefer simple selectors inside the pseudo-class to minimize selector matching complexity. Use the adjacent sibling combinator (+) for precise immediate-previous selection, and reserve the general sibling combinator (~) for cases where any subsequent match is acceptable.

Key Guidelines

• Use :has() for styling that responds to state changes--it automatically updates without JavaScript
• Use JavaScript for imperative operations triggered by user actions or application logic
• Always check for null before using previousElementSibling results
• Abstract traversal logic into utility functions for maintainability

Common Patterns

1. Form Validation: Use previousElementSibling to access labels and error messages for form validation
2. Accordion Components: Toggle open/close states by accessing previous/next items
3. Navigation Menus: Implement keyboard navigation with arrow keys using DOM traversal
4. Conditional Styling: Use :has() for spacing adjustments based on content structure

For complex applications, abstract element traversal logic into utility functions that express intent clearly. A function named getPreviousSection(element) is more readable than inline element.previousElementSibling chains, and it provides a single place to handle any special cases or edge conditions your application might require. Explore our guide on CSS rules and rulesets for deeper insights into selector patterns.

Sources

1. MDN Web Docs - CSS :has() - Official CSS selector reference with browser compatibility data and practical examples
2. MDN Web Docs - previousElementSibling - Official DOM API documentation with examples showing sibling traversal