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

Question

[Даулет Даулет]

Есть родитель .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';
        }

Answer 1

[Ankhena]

Может, вам поможет обычный css и селектор типа

:nth-child(3):last-child {
  тут стили, если третий является последним
}

Answer 2

[Sergei Nazarenko]

Вариант от Ankhena лучше не стоит использовать ЖС когда можно обойтись без него.

Comments

[Даулет Даулет]

Спасибо за ответ! а как сделать чтобы добавилась класс к последнему элементу с классом tab_item а то у меня внутри tabs_content есть еще класс clearfix и в данным случае last добавляется к нему

[Sergei Nazarenko]

Даулет Ногайбек, поправил

[Даулет Даулет]

Sergei Nazarenko, Спасибо большое все работает!