Добавить дополнение к последнему дочернему элементу, если присутствует только 2

В магазине WooCommerce иногда у меня есть 3 , а иногда 2  (зависит от продукта) Как мне архивировать, чтобы добавить отступ к последнему , но только если показаны 2 . Не следует добавлять отступы, когда показаны все 3 .

<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>

html css css-selectors

13.12.2020 14:57

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

118

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать селектор +

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>

13.12.2020 15:05

Ответ принят как подходящий

Как [..] добавить отступ к последнему , но только если их 2 

Комбинированный селектор, который включает в себя:

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

выберет только те элементы, которые являются вторыми и последними в текущей серии.

например

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

Рабочий пример:

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>

13.12.2020 15:20

Другие вопросы по теме

Сделать блоки элементов списка с пробелом CSS

Кнопка с полем ввода не хочет выравниваться по правому углу

Создайте анимацию постепенного появления / исчезновения на фоновых изображениях, измените CSS в ответ

Открыть новый кран HTML в Chrome с определенной шириной и высотой

Как я могу масштабировать строки изображений внутри div

JQuery addClass работает, но javascript classList.add не работает

Изменение цвета фона с помощью оператора else if - JQuery

Контейнер Flexbox не включает margin-bottom

Как расположить заголовок раздела так, чтобы он плавал прямо на карточке

Bootstrap выровняет svg по центру заголовка

Добавить дополнение к последнему дочернему элементу, если присутствует только 2

Ответы 2

Другие вопросы по теме

Похожие вопросы