0

всем доброго времени суток Например, есть такой код: мне нужно обратится к 2 последним элементам h4, как я могу это сделать правильно?

<div class="block__body">
  <div class="block__column">
    <div class="block__item">
      <h4>Текст</h4>
    </div>
  </div>
  <div class="block__column">
    <div class="block__item">
      <h4>Текст</h4>
    </div>
  </div>
  <div class="block__column">
    <div class="block__item">
      <h4>Текст</h4>
    </div>
  </div>
  <div class="block__column">
    <div class="block__item">
      <h4>Текст</h4>
    </div>
  </div>
</div>

2
  • 1
    А в каком месте и с помощью чего нужно обратиться к этим элементам? JS, PHP, jQuery, CSS?
    – 4500zenja
    Commented 19 янв. 2022 в 17:10
  • css, нужно обратится к 2 последним h4
    – TipTop89
    Commented 19 янв. 2022 в 17:11

3 ответа 3

1

Чтобы стили применялись не ко всему блоку целиком, а только к h4, следует css исправить, например, так:

.block__column:nth-last-child(-n+2) .block__item h4 {
  color: red;
}
<div class="block__body">
  <div class="block__column">
    <div class="block__item">
      <h4>Текст</h4>
    </div>
  </div>
  <div class="block__column">
    <div class="block__item">
      <h4>Текст</h4>
    </div>
  </div>
  <div class="block__column">
    <div class="block__item">
      <h4>Текст</h4>
    </div>
  </div>
  <div class="block__column">567567
    <div class="block__item">123
      <h4>Текст</h4>
    </div>
  </div>
</div>

При этом, если структура блоков будет разной, то такой css не сработает. В html добавил цифры, чтобы было ясно, стиль применяется именно к h4.

0

Для того чтобы обратиться к двум последним элементам вы можете использовать псевдокласс :nth-last-child

-n+2 - находит два последних элемента

Посмотрите мой пример.

.block__column:nth-last-child(-n+2) {
  color: lime;
}
<div class="block__body">
  <div class="block__column">
      <div class="block__item">
          <h4>Текст</h4>
      </div>
  </div>
  <div class="block__column">
      <div class="block__item">
          <h4>Текст</h4>
      </div>
  </div>
  <div class="block__column">
      <div class="block__item">
          <h4>Текст</h4>
      </div>
  </div>
  <div class="block__column">
      <div class="block__item">
          <h4>Текст</h4>
      </div>
  </div>
</div>

0

Достаточно использовать свойство nth-last-child(m), который будет принимать m последних элементов.

P.S. Почему-то работает только при block__column, хотя, если взять h4 напрямую либо block__item, срабатывают ВСЕ элементы. Знать бы ещё, почему... =/

.block__column:nth-last-child(-n+2) {
   color: red;
}
<div class="block__body">
  <div class="block__column">
    <div class="block__item">
      <h4>Текст</h4>
    </div>
  </div>
  <div class="block__column">
    <div class="block__item">
      <h4>Текст</h4>
    </div>
  </div>
  <div class="block__column">
    <div class="block__item">
      <h4>Текст</h4>
    </div>
  </div>
  <div class="block__column">
    <div class="block__item">
      <h4>Текст</h4>
    </div>
  </div>
</div>

1
  • 2
    c block__item и h4 не отработает из за того что не соседние элементы (не на одном уровне)
    – Krovorgen
    Commented 20 янв. 2022 в 7:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.