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

Question

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?

Answer 1

The element>element selector is used to select elements with a specific parent.

Note: Elements that are not directly a child of the specified parent, are not selected.

So, you must use + Selector :

The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element.

Read More :

https://www.w3schools.com/cssref/sel_element_gt.asp

In your Case Change Code Like:

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

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