CSS if parent has class

The CSS

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

The

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

This article explains the need for the

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

Contents

Why is the let el = document.querySelector(".someElement"), elParent = null if(el) { elParent = el.parentNode } 1 selector necessary?

Most developers rely on JavaScript for certain features CSS does not support by default. However, web browsers today are more powerful than ever, which is opening doors to many new and interesting CSS features.

The

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

Let’s go over some of the general needs for the

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

First is the possibility to check whether an element contains certain other elements or not, and then styling it accordingly. JavaScript was the only way to do this before, as you can see here:

let content = document.querySelector("#content"),
    headings = [] 

if(content) {
  headings = content.querySelectorAll("h1, h2, h3")
}

if(headings.length) {
  // do something
}

In the code above, we have used

let el = document.querySelector(".someElement"),
    elPs = null

if(el) {
  elPs = el.previousElementSibling
}

An empty NodeList would mean there are no elements present in the immediate parent. An implementation of the above can be found here. Or, you can .

Second is the capability to select the parent element from the children. Again, in lack of a CSS facility to do so, developers have relied on Web API’s parentNode property:

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

View a CodePen demo of the code above here, and .

Finally, there is the ability to select the previous sibling of a given element. The sibling selector in CSS allows you to select the next sibling, but there was no CSS-only way to select previous siblings. The JavaScript implementation looks like this (view a CodePen demo here):

let el = document.querySelector(".someElement"),
    elPs = null

if(el) {
  elPs = el.previousElementSibling
}

You can see how to perform this action with .

Everything we did above with JavaScript can now be achieved with CSS

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

Enabling support for the let el = document.querySelector(".someElement"), elParent = null if(el) { elParent = el.parentNode } 1 selector

If you are on an older Chrome version (v.101-104), you can enable this feature from Chrome flags. Make sure you have Chrome 101+ and navigate to chrome://flags from the browser’s address bar.

Set the Experimental Web Platform features to Enabled and you’re good to go. Relaunch the browser and you can work with CSS

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

What does the CSS let el = document.querySelector(".someElement"), elParent = null if(el) { elParent = el.parentNode } 1 selector do?

Let’s explore the

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

The below code explains its general usage and syntax. The class

.selector:has(.class) { ... }
.selector:has(#id) { ... }
.selector:has(div) { ... }

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

.selector:has(.class) { ... }
.selector:has(#id) { ... }
.selector:has(div) { ... }

Chainability

You can chain multiple

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

.selector:has(div):has(.class):has(#id) {
  ...
}

Argument list for multiple selections

You can also provide a list of multiple element selectors, similar to chaining, but much more efficient:

.selector:has(div, .class, #id) {
  ...
}

Flexibility

Suppose you accidentally provided an invalid element selector to the

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

.selector:has(div, accordion, .class, ::lobster, #id) {
  ...
}

.selector:has(.class) { ... }
.selector:has(#id) { ... }
.selector:has(div) { ... }

.selector:has(.class) { ... }
.selector:has(#id) { ... }
.selector:has(div) { ... }

Usage scenarios

Let’s take a look at some example scenarios in which CSS’

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

Selecting the parent

This may be the most common use of the

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

The universal selector (

.selector:has(.class) { ... }
.selector:has(#id) { ... }
.selector:has(div) { ... }

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

.selector:has(div):has(.class):has(#id) {
  ...
}

Selecting the parent from child with CSS has()

No Description

Checking for multiple children

As discussed in the properties segment above,

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

Checking for multiple element with CSS has()

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab pariatur, obcaecati accusantium alias minus repellat itaque amet libero corrupti maiores consectetur quasi! Eligendi ratione eaque et tenetur assumenda neque reprehenderit. Unde, nemo cumque molestiae mollitia impedit voluptate quisquam laborum ut, vitae aliquid totam numquam possimus dignissimos beatae quos corporis alias quod magnam quidem.

Selecting the previous sibling

The selection of the previous sibling is made possible by combining the CSS adjacent sibling combinator with the

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

As you may already know, the adjacent sibling combinator selects the very next sibling of a given element. We can use this behavior with

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

.selector:has(div):has(.class):has(#id) {
  ...
}

CSS :has() – Selecting Previous Sibling

No Description

Conditional decorations

Styling things with and without certain child elements separately can be avoided with the

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

Conditional figure decoration with CSS :has()

No Description

What if a

.selector:has(div):has(.class):has(#id) {
  ...
}

.selector:has(div):has(.class):has(#id) {
  ...
}

.selector:has(div):has(.class):has(#id) {
  ...
}

Similar to figure decoration, we can easily switch the text alignment of block quotes with more than one paragraph. See it in action here.

Styling empty states

We already have a pseudo-class called

.selector:has(div):has(.class):has(#id) {
  ...
}

It’s not ideal to use

.selector:has(div):has(.class):has(#id) {
  ...
}

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

Styling Empty States with CSS :has()

No Description

Type and block adjustments

While styling for an article, keeping type and block elements aligned is a tricky job. Consider an example of mixing code blocks, figures, and block quotes with the general type elements.

The block elements should have more vertical spacing and decorations to stand out among different typographical entities. Here’s some CSS to handle that.

Over 200k developers use LogRocket to create better digital experiences

p {
  margin: 0;
}

p:not(:last-child) {
  margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  margin: 1.5em 0 1.5rem;
  color: #111;
}

pre,
figure,
blockquote {
  margin: 3em 0;
}

figcaption {
  margin-top: 1em;
  font-size: 0.75em;
  color: #888;
  text-align: center;
}

The snippet above will produce uneven vertical spacing between headings and block elements, as shown here. But it is possible to make up for these irregularities using the previous sibling selection hack.

Type and Block adjustments using CSS :has()

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit corrupti perferendis quod laborum explicabo ratione quidem laudantium officia odit vitae, quisquam ullam aliquid voluptate consequatur eos quis ducimus, repellat aperiam. Hic tenetur modi explicabo itaque incidunt, obcaecati fugiat consequuntur asperiores aliquid, eius, atque ullam unde. Aut et molestias eaque repudiandae!

Iconized CTAs

Suppose you are creating a CTA or button component in CSS with two variations: the first one is the default, plain button, and the second one is with an icon.

Now, if you are planning to write two separate classes for that, it can be easily avoided with the

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

.selector:has(div, .class, #id) {
  ...
}

.selector:has(div, .class, #id) {
  ...
}

Simple Iconized CTAs with CSS :has()

No Description

Layout adjustments

Let’s say you have two layout variations for a header component: one is the fixed-width, and the other one is liquid, of course.

To keep the contents of the header within a fixed width, we have to add a content wrapper element inside it. The only difference between the markup of these two header versions is the wrapper element.

We can then pair the

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

.selector:has(div, .class, #id) {
  ...
}

Wrapper adjustments with :has()

No Description

Another example of adjusting the layout can be modifying the number of columns in a grid as soon as they reach a certain number.

This can be handy when you are not using the

.selector:has(div, .class, #id) {
  ...
}

More great articles from LogRocket:

• Don't miss a moment with The Replay, a curated newsletter from LogRocket
• Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
• Use React's useEffect to optimize your application's performance
• Switch between multiple versions of Node
• Discover how to animate your React app with AnimXYZ
• Explore Tauri, a new framework for building binaries
• Compare NestJS vs. Express.js

Adjusting Grid according to the number of items with CSS :has()

No Description

As you can see above, the grid automatically adjusts to three columns as soon as it exceeds the mark of two items.

Better form usability

Interactivity is best defined when it’s properly connected to feedback. When it comes to interactive HTML forms, offering the user feedback about its input is the best thing you can do.

With the help of the

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

.selector:has(div, accordion, .class, ::lobster, #id) {
  ...
}

.selector:has(div, accordion, .class, ::lobster, #id) {
  ...
}

Interactive HTML Form with CSS :has()

No Description

Checking for browser support

The above-discussed examples show an error dialog if no support to the

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

.selector:has(div, accordion, .class, ::lobster, #id) {
  ...
}

@supports (selector(:has(*))) {
  .selector:has(...) {
    ...  
  }
}

Above is the progressive way to check for support and style the element as required. If a codebase uses some new features directly, here’s a way to write the backward-compatible versions of the same:

@supports not (selector(:has(*))) {
  .selector {
    ...  
  }
}

The same can also be used to prompt the user if no support was found.

You can also use the Support API in JavaScript to detect the browser support for different features. Here’s an example of that checking for

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

Conclusion

In the article above, we learned about

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

We also discussed the current support offered to it by different browsers, and learned how to check for the browser support.

Thanks for reading all the way through. I hope you learned something new through this. Feel free to share more examples of how

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

Is your frontend hogging your users' CPU?

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

How to apply CSS to child if parent has class?

How to select child based on parent in CSS?

How do you check if an element has a class CSS?

Does CSS have a parent selector?