Search code examples
csscss-selectorsdry

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