---
title: Selecting an Element by a Child it Contains
keywords: selector, CSS selector, selector resolver, child selector, child element, text content, contains text
description: How can you style an element based on a child it contains? JavaScript is aware of all of the children of every element. Learn how to use JavaScript and CSS together to style elements based on their children.
---

The CSS specifications include a feature called [`:has()`](https://drafts.csswg.org/selectors/#relational) that would allow you to select an element that contains another element matching a CSS selector, but so far [no browsers](http://caniuse.com/#feat=css-has) have shown interest in supporting it.

(like `:has()`, `:focus-within`)

## Parts Required

### JS Tests

Testing for a child element via `querySelector()`:

```javascript
this.querySelector(test)
```

## Plugins Capable

- [EQCSS](../plugins/eqcss.html)
- [Selectory](../plugins/selectory.html)
- [XPathy](../plugins/xpathy.html)
- [reproCSS](../plugins/reprocss.html)
- [Scoped Eval Mixin](../plugins/scoped-eval-mixin.html)
- [XPath Selector Mixin](../plugins/xpath-selector-mixin.html)


## Syntax Examples

### EQCSS

```css
@element section {
  eval('querySelector("h2") && "$this"') {
    background: darkblue;
  }
}
```

### Selectory

```css
[test="this == document.querySelector(`#target`).parentNode"] {
  background: lime;
}
```

### XPathy

```css
[xpath="//div[h2]"] {
  background: purple;
}
```

## Demos

- [Emulating `:has()` with EQCSS](http://codepen.io/tomhodgins/pen/yMpdOz)
- [Emulating `:has()` with Selectory](http://codepen.io/tomhodgins/pen/ybvaqV)
- [Emulating `:has()` with XPathy](https://codepen.io/tomhodgins/pen/awzOJr)