0

I have the following code:

<div class="column mcb-column mcb-item-115eb3f58 one column_pricing_item servicebutton">
  <div class="pricing-box pricing-box-featured pricing-box-box">
    <div class="plan-header">
      <h2>Service</h2>
      <p class="subtitle">xyz</p>
    </div>
    <div class="plan-inside">
      <h5>Our Service</h5>
      <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
      </ul>
    </div>
    <div class="plan-footer">
      <a
        href="#"
        class="button button_theme button_js"
        ><span class="button_label">More</span></a
      >
    </div>
  </div>
</div>

How can I select the button with the label "More" for CSS by "referencing" the first div with the class servicebutton?

.servicebutton > .button_theme {...}

does not work.

.plan-footer > .button-theme {...}

does work, but I need to select by using the class servicebutton from the first div element.

Thanks in advance.

Regards!

Gardinero
  • 149
  • 1
  • 9

1 Answers1

1

Boom. Just follow the chain down to the element you're after.

.servicebutton .plan-footer .button_label {
  background-color: blue;
  }
<div class="column mcb-column mcb-item-115eb3f58 one column_pricing_item servicebutton">
  <div class="pricing-box pricing-box-featured pricing-box-box">
    <div class="plan-header">
      <h2>Service</h2>
      <p class="subtitle">xyz</p>
    </div>
    <div class="plan-inside">
      <h5>Our Service</h5>
      <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
      </ul>
    </div>
    <div class="plan-footer">
      <a
        href="#"
        class="button button_theme button_js"
        ><span class="button_label">More</span></a
      >
    </div>
  </div>
</div>
Diego
  • 197
  • 4