Question: I have several hierarchies separately listed out below where first selector is the parent div, second is the image item within the div. But could I combine these somehow?

```
.outdoors .how-to-image {
  cursor: pointer;
}

.snowsports .how-to-image {
  cursor: pointer;
}

.stripe .how-to-image {
  cursor: pointer;
}

.twilio .how-to-image {
  cursor: pointer;
}

.rental_requests .how-to-image {
  cursor: pointer;
}

```

Answer: 
You can use the pseudo-class selector [`:is()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:is) to deduplicate the common child selector when there are multiple parents:

```css
:is(.outdoors, .snowsports, .stripe, .twilio, .rental_requests) .how-to-image {
  cursor: pointer;
}

```

The code above is equivalent to:

```css
.outdoors .how-to-image,
.snowsports .how-to-image,
.stripe .how-to-image,
.twilio .how-to-image,
.rental_requests .how-to-image {
  cursor: pointer;
}

```

References
----------

* <https://web.dev/css-is-and-where>
* <https://caniuse.com/css-matches-pseudo>
Sure, you can combine selectors by separating them with a comma:

```
.outdoors .how-to-image, .snowsports .how-to-image, .stripe .how-to-image, .twilio .how-to-image, .rental_requests .how-to-image {
  cursor: pointer;
}

```

And depending on the HTML hierarchy you may even be able to narrow it down further.