Задать вопрос
@Dauletnbk
Верстальщик

Как применить стили дочерным классам в зависимости их количества?

Есть родитель .tabs_content который имеет дочерные классы .tab_item их максимум 4 штуки,
мне нужно добавить класс .tab_item_last к последнему элементу если их 3, если больше 3 то оставить как есть

мой код:
<div class="tabs__content tabs__content_active" data-tab="arhitektura">
    <div class="row">
        <a href="#" data-fancybox="" data-src="#function-53" class="tab_item">
            <span class="tab_item_plus">+</span>
            <div class="tab_item_title">
                Сейсмостойкость
            </div>
            <div class="tab_item_img" style="background: url(https://etasagroup.kz/uploads/posts/2022-09/1663492668_group-52.jpg);"></div>
        </a>
        <div id="function-53" style="display: none;">
            <div class="fancybox_popup">
                <div class="popup_slider_wr">
                    <div class="popup_slider slick-initialized slick-slider">
                        <div class="slick-list">
                            <div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="popup_title">
                Сейсмостойкость
            </div>
            <div class="popup_txt">
                Но внедрение современных методик играет важную роль в формировании укрепления моральных ценностей. Кстати, тщательные исследования конкурентов призывают нас к новым свершениям, которые, в свою очередь, должны быть обнародованы. Для современного мира глубокий уровень погружения, в своём классическом представлении, допускает внедрение системы обучения кадров, соответствующей насущным потребностям.
            </div>
        </div>
    </div>
</div>


То что я нашел, но не смог адаптировать под себя
var menu = document.querySelector('.tabs__content').children;
        if (menu.length === 5) {
            menu[4].style.marginLeft = '25px';
        }
        if (menu.length === 6) {
            menu[4].style.marginLeft = '15px';
        }
  • Вопрос задан
  • 73 просмотра
Подписаться 1 Простой Комментировать
Решения вопроса 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Может, вам поможет обычный css и селектор типа
:nth-child(3):last-child {
  тут стили, если третий является последним
}
Ответ написан
Комментировать
nazares
@nazares
Software Engineer
Вариант от Ankhena лучше не стоит использовать ЖС когда можно обойтись без него.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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