How to select children of elements with a shared base class and an additional class?

Question

I have code similar to the following:

.banner.customer-service {
    height: calc(70vh - 85px - 8em);
    background:url(//careers.jobvite.com/marinecreditunion/images/customerservice.jpg) center center / cover no-repeat;
}
.banner.customer-service span {
    background:rgba(0,0,0,0.5);
}
.banner.early-talent {
    height: calc(70vh - 85px - 8em);
    background:url(//careers.jobvite.com/marinecreditunion/images/earlytalent.jpg) center center / cover no-repeat;
}
.banner.early-talent span {
    background:rgba(0,0,0,0.5);
}

<div class="banner"><p>Header</p></div>
<div class="banner customer-service"><p>Specific Header</p></div>
<div class="banner early-talent"><p>Other Specific Header</p></div>

I have 12 classes similar to the .banner.specific-class. What I'm hoping to do is something like this:

.banner.* > p {} /* stuff to apply to the p tag */

I DON'T want the style applied to elements with just .banner; I only want to apply the styles to elements with .banner and a second class.

My goal is to apply styling ONLY to elements that have .banner.other-class p and not the base .banner p.

Is there a way to do this without writing individual CSS styles for each of the 12 classes?

Answer 1

You can think about this differently and target all the elements then reset the style where only the banner class is present but you need to pay attention to whitespace in the class attribute:

.banner {
  color:red;
}

[class="banner"] {
  color:blue;
}

<div class="banner"><p>Header</p></div>
<div class="banner customer-service"><p>Specific Header</p></div>
<div class="banner early-talent"><p>Other Specific Header</p></div>


<div class="banner "><p>I will be red!!!</p></div>

To avoid the whitespace issue you may consider some JS and use the trim() function. Here is another answer where I used the same trick: https://stackoverflow.com/a/52557233/8620333

You can also combine this with :not()

.banner:not([class="banner"]) {
  color:red;
}

<div class="banner"><p>Header</p></div>
<div class="banner customer-service"><p>Specific Header</p></div>
<div class="banner early-talent"><p>Other Specific Header</p></div>


<div class="banner "><p>I will be red!!!</p></div>