Is it possible to style a CSS class relative to another CSS class (not outer class)?

Viewed 2170

So, here's a snippet of my HTML:

<div class="stepwizard__step"> 
  <a class="btn btn-primary stepwizard__btn">1</a>
  <p class="stepwizard__step-text">Payment</p>
</div>

Basically, what I want to do is, every time there's a Bootstrap primary button (.btn-primary), I want to change the color of the .stepwizard__step-text (in this case, "Payment") to red.

Is this possible?

My first instinct was to try something like this:

.btn-primary > .stepwizard__step-text {
  color: red;
}

but then I realized that won't work because the stepwizard__step-text class isn't inside the btn-primary class.

I realize this is a bit of stretch, but is there a way in CSS to check if the btn-primary class exists inside of stepwizard__step and if it does, to change the color of stepwizard__step-text to red? If not, can anyone think of another way to do this?

4 Answers
Related