[SOLVED] DRY up CSS - multiple parents to one child

DRY up CSS - multiple parents to one child

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;
}

Solution

If the parent element doesn't matter, then you could simply use:

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

Otherwise, you would have to combine the selectors. The simplest form would be:

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

Aside from that, there is no other way to simplify it. Even if you were to use LESS, the same would be outputted.

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

Output:

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