# CSS Parent Selector Using the :has() Pseudo-Class

> Select and style parent elements in CSS using the :has() pseudo-class selector, with a fallback approach using JavaScript parentNode for older browsers

**URL:** https://sentry.io/answers/is-there-a-css-parent-selector/

---

## The Problem

You want to select the parent of an element to style it. For example, you may have the following two buttons and you want to add extra padding to the button that has an icon:

```html
<button class="btn">
  Start game
  <span class="icon">
    &#129409;
  </span>
</button>

<button class="btn">
  High Scores
</button>
```

You need to select the parent button of the `span` with a class of `"icon"`. How do you do this?

## The Solution

You can use the [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has) CSS [pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes) to select a parent element. 

The `:has()` pseudo-class takes a selector or [list of selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#relative_selector_list) as an argument. Add the `:has()` pseudo-class to an element to select it only if it contains an element that matches the passed-in selector argument.

For example, the CSS code below adds padding to the button with a class of `"btn"` if it has an element with a class of `"icon"` inside it:

```css
.btn:has(.icon) {
  padding: 0.25rem 0.5rem;
}
```

The [browser support](https://caniuse.com/css-has) for the `:has()` selector is quite good; most major browsers support it.

Alternatively, you can use JavaScript to select a parent element and style it:

```javascript
const icon = document.querySelector('.btn .icon');
const btn = icon.parentNode;
btn.style.padding = "0.25rem 0.5rem";
```

You first select the child element and then get its parent element using the [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode) property.

## Further Reading

If you're looking to get a deeper understanding of how web performance optimization works, take a look at the following articles:

- [From LCP to CLS: Improve your Core Web Vitals with Image Loading Best Practices](https://blog.sentry.io/from-lcp-to-cls-improve-your-core-web-vitals-with-image-loading-best/)
- [How to identify and fix Render-Blocking Resources](https://blog.sentry.io/how-to-id-fix-render-blocking-resources/)
- [Low effort image optimization tips](https://blog.sentry.io/low-effort-image-optimization-tips/)
- [5 easy tips to improve your personal website performance](https://blog.sentry.io/5-easy-tips-to-improve-your-personal-website-performance/)
- [How to hack your Google Lighthouse scores in 2024](https://blog.sentry.io/how-to-hack-your-google-lighthouse-scores-in-2024/)
- [11 Habits of Highly Effective Developers](https://syntax.fm/show/778/11-habits-of-highly-effective-developers)

---

*Source: [sentry.io/answers/is-there-a-css-parent-selector/](https://sentry.io/answers/is-there-a-css-parent-selector/)*