More concise CSS to select both current and child elements

Question

Overview

As part of a generic CSS framework, I have built a variety of controls. I wish to style them in the brand colours using generic and flexible classes, while keeping my CSS as small as possible.

Due to the number of elements and controls I need to style, the CSS file is crammed full of brand-centric styles. To implement the flexible structure I desire, it looks like I'll have to double-up (or triple-up) every single brand rule from

.brand.brand-red  .control.brand-control { color: red; }

into

.brand.brand-red  .control.brand-control,     /* Required */
.brand .brand-red .control.brand-control,     /* Required */
.brand  .brand-red.control.brand-control {    /* Useful */
    color: red;
}

This is less than ideal, as it would nearly triple the overall size of my CSS file, which I'm desperate to keep as small as possible. Is there any way to write the second block of CSS smaller?

Ideally I would be able to do something like this:

.brand & .brand-red.control & .brand-control { ... }
    /* or */
.brand / .brand-red.control / .brand-control { ... }

but I'm pretty sure nothing exists for this sort of thing yet, if it ever will.

Summary

I would like my generic CSS to be as small as possible, but still work for all of the following structures:

/* COLOURS // BRAND COLOURS */
.brand.brand-red  .control.brand-control,     /* Required */
.brand .brand-red .control.brand-control,     /* Required */
.brand  .brand-red.control.brand-control {    /* Useful */
    color: red;
}

.brand.brand-red.control.brand-control {      /* Not Required */
    color: red;
}

<div class="brand brand-red">
    <div class="control brand-control">Test 1 // Required</div>
</div>

<div class="brand">
    <div class="brand-red">
        <div class="control brand-control">Test 2 // Required</div>
    </div>
</div>

<div class="brand">
    <div class="brand-red control brand-control">Test 3 // Useful</div>
</div>

<div class="brand brand-red control brand-control">Test 4 // Not Required</div>

Reference:

W3Schools // CSS Selectors Reference

Answer 1

What you are trying to achieve is currently not possible using css selectors.

You can target:

• .parent-class.another-parent-class
• .parent-class > .direct-child-class
• .parent-class .descendant-class
• And of course a lot of other cool options...

But unfortunately you don't have an option for selecting a parent element, with another class that may be applied on it, OR on any of its descendants.

Sorry :-)