Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Add padding to last Child if only 2 are present – Woocommerce

In a WooCommerce shop sometimes I do have 3 <p> and sometimes I do have 2 <p> (depends on the product)
How to I archive to add a padding to the last <p> but only if there are 2 <p> are shown. No padding should be added when all 3 <p> are shown.

<div class="astra-shop-thumbnail-wrap">
    <a href="#" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img width="186" height="186" src="#"> </a>
        <div class="label-group">
            <a href="#" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"></a>
                <div class="categories-link">
                    <a href="#" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"></a>
                    <a href="#" class="sfinkslinks">Accessoires</a>
                    <a href="#" class="sfinkslinks">Schale</a>
                </div>
        </div>

<p class="wc-gzd-additional-info tax-info">inkl. MwSt.</p>
<p class="wc-gzd-additional-info shipping-costs-info">zzgl. Versandkosten</p>
<p class="wc-gzd-additional-info delivery-time-info">Lieferzeit: 5 - 7 Werktage</p>
</div>
Tags:

2

Answers


  1. 0

    You can make use of + selector

    body {
  margin: 0
}

.wc-gzd-additional-info {
  width: 100%;
  background: red;
  margin-top: 0;
  margin-bottom: 5px;
  box-sizing: border-box
}

.tax-info+.shipping-costs-info+.delivery-time-info {
  padding: 0
}

.shipping-costs-info+.delivery-time-info,
.tax-info+.delivery-time-info {
  padding: 50px
}
    <p class="wc-gzd-additional-info tax-info">inkl. MwSt.</p>
<p class="wc-gzd-additional-info shipping-costs-info">zzgl. Versandkosten</p>
<p class="wc-gzd-additional-info delivery-time-info">Lieferzeit: 5 - 7 Werktage</p>

<hr />

<p class="wc-gzd-additional-info shipping-costs-info">zzgl. Versandkosten</p>
<p class="wc-gzd-additional-info delivery-time-info">Lieferzeit: 5 - 7 Werktage</p>

<hr />

<p class="wc-gzd-additional-info tax-info">inkl. MwSt.</p>
<p class="wc-gzd-additional-info delivery-time-info">Lieferzeit: 5 - 7 Werktage</p>
    Login or Signup to reply.
  2. 0

    How [..] to add a padding to the last <p> but only if there are 2 <p>

    A combined selector which includes both:

    • :last-of-type
    • :nth-of-type(2)

    will select only those elements which are both second and last in the current series.

    e.g.

    p:nth-of-type(2):last-of-type

    Working Example:

    div {
  float: left;
  width: 120px;
  margin-right: 12px;
  border: 1px solid rgb(255, 0, 0);
}

p {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  text-align: center;
}

p:nth-of-type(2):last-of-type {
  padding: 12px;
}
    <div>
<p>Paragraph 1</p>
</div>

<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>

<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>

<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search