CODEWITHSUNDEEP
htmlcss
Alberto Tonello
Alberto Tonello

Reputation: 45

CSS: hide child element if parent is

This is my simplified CSS structure:

<div class="quick-shop-form">
  <form class="variations_form cart" method="post" etc...>
    <table class="variations" cellspacing="0">
    </table>
    <div class="single_variation_wrap">
      <div class="woocommerce-variation single_variation" style="display: none;"></div>
      <div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled">
        <p class="points">Guadagna fino a <strong>481</strong> Zaeti.</p>

How can I hide the paragraph containing class="points" when it is under the div containing class="quick-shop-form"?

Can I do it via CSS? Or do I need a script?

Upvotes: 1

Views: 1226

Answers (3)

technophyle
technophyle

Reputation: 9128

You can do it through CSS.

This should work:

div.quick-shop-form p.points {
  display: none;
}

Upvotes: 1

wangdev87
wangdev87

Reputation: 8751

div.quick-shop-form p.points {
  display: none;
}
<div class="quick-shop-form">
  <form class="variations_form cart" method="post" etc...>
    <table class="variations" cellspacing="0">
    </table>
    <div class="single_variation_wrap">
      <div class="woocommerce-variation single_variation" style="display: none;"></div>
      <div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled">
        <p class="points">Guadagna fino a <strong>481</strong> Zaeti.</p>
      </div>
    </div>
  </form>
</div>

Upvotes: 0

lucideuclid
lucideuclid

Reputation: 9

You can do it with plain css:

.quick-shop-form .points {
  display: none;
}

Upvotes: 0

Related Questions