CSS Selector for Parent Element

CSS parent selector is a highly discussed topic within the developer community due to their absence in traditional CSS. Such a selector has been a long-standing desire among front-end developers. The concept revolves around styling a parent element based on the characteristics of its child elements and the overall HTML structure. Although CSS lacks a direct parent selector, introducing the :has() pseudo-class offers a solution to this limitation.

The :has() Pseudo-Class

The :has() pseudo-class, a new selector proposed by the CSS Working Group. It acts as a parent selector, allowing you to style a parent element if it contains a specific element as a child. This functionality is groundbreaking for web developers.

Basic Usage of :has()

To utilize the :has() pseudo-class, you need to write a selector that targets the parent element and includes the :has() pseudo-class followed by the selector of the child element:

div:has(span.class) {
  background-color: lightblue;
} 

This example styles any div that contains a span with a specific class by changing its background color.

figure:has(figcaption) {
  border: 1px solid black;
} 

This example styles any figure element that contains a figcaption by adding a border.

Browser Support and Performance

The :has() pseudo-class has major browsers support, including the latest versions of Chrome, Firefox, and Safari. However, extensive use of this selector can impact performance, so it should be used judiciously. For detailed and up-to-date information on browser support, you can visit Can I use :has() on caniuse.com.

JavaScript Workaround for Parent Selectors

Before the :has() pseudo-class, JavaScript was commonly used to select parent elements:

const image = document.querySelector('.card .image')
const card = image.parentNode
card.style.backgroundColor = 'blue'

This script selects the parent element of a child element with a specific class and applies padding to it.

Combining Selectors for Complex Use Cases

Combining the :has() pseudo-class with other selectors can target specific parent elements more effectively:

div:has(.special):not(:has(.excluded)) { 
  border-radius: 10px;
} 

This targets div elements containing .special but not .excluded, applying a border radius to them.

h2:has(+ p) {
  margin-top: 20px;
} 

This example adds a margin to paragraph elements that come immediately after an h2 element.

Nesting Selectors

Using :has() within nested selectors allows for intricate designs:

.card:has(.image > .icon) {
  background-color: purple
} 

This applies a shadow to .card elements containing an .image with an .icon.

Leveraging Pseudo-Classes and Pseudo-Elements

Understanding the difference between pseudo-classes and pseudo-elements is crucial. The :has() pseudo-class can be used to style an input element based on its state, such as :valid or :invalid. The :has() pseudo-class provides dynamic styling capabilities similar to pseudo-classes like :hover and :checked.

Practical examples

For web developers, the :has() pseudo-class in CSS opens up new possibilities for creating dynamic and responsive designs. Some practical examples can help you leverage this powerful selector effectively.

Enhancing Layouts with Flexbox and Grid

The :has() pseudo-class can be particularly useful when working with modern layout techniques like CSS Grid and Flexbox. For instance, you can center content within a container if it contains a specific child element:

.container:has(.child) {
  display: flex;
  align-items: center;
}

This rule applies flexbox properties to any .container element that includes a .child element, centering its content vertically.

Styling Form Elements

Forms are a critical part of many web applications. You can use the :has() pseudo-class to style a form element based on its child elements. For example, to add a red border to forms that include text inputs:

form:has(input[type="text"]) {
  border: 1px solid red;
} 

This CSS rule targets form elements containing text inputs, making it easier to visually distinguish forms based on their content.

Highlighting Articles in Content Management Systems

In a content management system (CMS), you might want to highlight certain articles. The :has() pseudo-class can help you achieve this:

.article:has(.important) {
  background-color: yellow;
}

This example adds a yellow background to articles that contain an element with the class .important, drawing attention to key content.

Bold Text for Active Navigation Items

.nav-item:has(.active) {
  font-weight: bold;
} 

Use this CSS to bold the text of navigation items that contain an active child element, improving the user interface by highlighting the current section.

Conclusion

The :has() pseudo-class is a significant addition to CSS, enabling parent selectors and expanding the capabilities of CSS selectors. By understanding and implementing this new pseudo-class, web developers can create more dynamic and responsive designs, enhancing the user experience across various web applications.

This article has provided an in-depth look at the CSS parent selector, focusing on the :has() pseudo-class. It covers practical examples, browser support, and integration with modern CSS layout techniques, offering a comprehensive guide for web developers to leverage this new functionality effectively.