Как правильно обращаться к элементам при добавление класса?

Question

[Дмитрий Ярощук]

Нужно сделать вот такое появление блока с фильтрами


Проблема заключается в следующем: как в css прописать, если у блока catalog-filter есть класс active то делать следующие задать кнопке catalog__btn display:none, а кнопке catalog__btn-close display: block, также блоку catalog__wrapper margin-bottom: 50px., прикрепил код html и css:

<div class="catalog__info">
    <div class="catalog__wrapper">
        <h2 class="catalog__title custom-title">Каталог</h2>
        <button class="catalog__btn custom-btn">Фильтр</button>
        <button class="catalog__btn-close" id="catalogBtnClose">
            <img src="./../../img/icons/close.svg" alt="Close">
        </button>
    </div>
    <div class="catalog-filter">
        <ul class="catalog-filter__column catalog-filter__face">
            <h4 class="catalog-filter__title">Уход для лица</h4>
            <li class="catalog-filter__item">
                <label>
                    <input type="radio">
                    <span>Крема</span>
                </label>
            </li>
            <li class="catalog-filter__item">
                <label>
                    <input type="radio">
                    <span>Сыворотки</span>
                </label>
            </li>
        </ul>
    </div>
</div>

.catalog-filter {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  transform: scale(0);
  height: 0;
  overflow: hidden;
  transition: transform 0.5s ease-in;
}

.catalog-filter.active {
  min-height: 316px;
  transform: scale(1);
  overflow: unset;
}

.catalog-filter.active + .catalog__wrapper .catalog__btn {
  display: none;
}

.catalog-filter.active + .catalog__wrapper .catalog__btn-close {
  display: block;
}

.catalog-filter.active + .catalog__wrapper {
  margin-bottom: 50px;
}

Comments

[Алексей Уколов]

если у блока catalog-filter есть класс active то делать следующие

Какие следующие? Что делать?

[Дмитрий Ярощук]

Алексей Уколов, Отредактировал :)

[IvanU7n]

либо :has(), либо переделывать структуру/логику, т.к. CSS не умеет смотреть назад

[Евгений]

Дмитрий Ярощук, можно так:

.catalog__info:has(.catalog-filter.active) > .catalog__wrapper {
    margin-bottom: 50px;
}

.catalog__info:has(.catalog-filter.active) > .catalog__wrapper > .catalog__btn {
    display: none;
}

.catalog__info:has(.catalog-filter.active) > .catalog__wrapper > .catalog__btn-close {
    display: block;
}

Answer 1

[Ankhena]

1. Совсем банальный: вешайте класс на родительский блок.

2. Через :has

.catalog__info:has(.catalog-filter.active)  .catalog__wrapper {
    margin-bottom: 50px;
}

.catalog__info:has(.catalog-filter.active)  .catalog__btn {
    display: none;
}

3. Самый интересный: с помощью кастомных свойств.

.catalog-filter {
  --open-btn-display: block;
  --margin: 0;
}

.catalog-filter.active {
  --open-btn-display: none;
  --margin: 50px;
}

.catalog__wrapper {
  margin-bottom: var(--margin);
}

.catalog__btn {
  display: var(--open-btn-display);
}

p.s. Зачем вам две кнопки, если они в одном месте в разметке, я не придумала. Меняете текст и стили и всё. Тогда уж логичнее закрывающую засунуть внутрь всего открываемого блока, тогда и не нужно с ней отдельных манипуляций.