1

У меня есть блок со списком, который содержит в себе еще один список. Я хочу применить стили только для первого списка, чтобы стили не применились к внутреннему списку.

<div class="header-menu d-lg-block">
                <div class="header-menu-inner">
                  <ul class="header-menu-list">
                    <li class="parent">
                      <a href="#">Типы ремонта</a>
                      <div class="header-dropdown-menu">
                        <div class="header-dropdown-menu-inner">
                          <ul class="header-dropdown-menu-list">
                            <li>
                              <a href="#">Черновой ремонт</a>
                            </li>
                            <li>
                              <a href="#">Чистовой ремонт</a>
                            </li>
                            <li><a href="#">Предпродажный ремонт</a></li>
                          </ul>
                        </div>
                      </div>
                    </li>
                    <li class="parent">
                      <a href="#">Услуги</a>
                      <div class="header-dropdown-menu">
                        <div class="header-dropdown-menu-inner">
                          <ul class="header-dropdown-menu-list">
                            <li>
                              <a href="#">Перегородки и ГКП конструкции</a>
                            </li>
                            <li>
                              <a href="#">Штукатурные работы</a>
                            </li>
                            <li><a href="#">Стяжка пола</a></li>
                            <li><a href="#">Звукоизоляция</a></li>
                            <li><a href="#">Плиточные работы</a></li>
                            <li><a href="#">Малярные работы</a></li>
                            <li><a href="#">Проектирование</a></li>
                          </ul>
                        </div>
                      </div>
                    </li>
                    <li>
                      <a href="#">О компании</a>
                    </li>
                    <li>
                      <a href="#">Примеры работ</a>
                    </li>
                    <li class="current">
                      <a href="#">Контакты</a>
                    </li>
                  </ul>
                </div>
              </div>
&-menu {
      display: none;
      margin: 0;
      position: absolute;
      top: calc(100% + 20px);
      left: 12px;
      width: calc(100% - 24px);
      box-shadow: 0 9999px 0 10011px rgba(var(--color-gray-900-rgb), 0.12);
      background-color: var(--color-white);
      z-index: 100;
      border-radius: 12px;

      &-inner {
        padding: 16px;
        background-color: var(--color-white);
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.04),
          0px 8px 16px rgba(0, 0, 0, 0.08);
        border-radius: 12px;
      }

      &-list {
        flex-direction: column;
        align-items: flex-end;

        & > li {
          font-family: var(--font-secondary);
          font-size: 16px;
          font-weight: 600;
          line-height: 22px;
          font-feature-settings: 'pnum' on, 'onum' on;

          a {
            padding: 0 0 2px 0;

            &::before {
              display: none;
            }
          }

          &:not(:last-child) {
            margin-right: 0;
            margin-bottom: 32px;
          }
        }
      }
    }
2
  • .parent:first-child, если я правильно понял 9 ноя 2022 в 9:26
  • @Александр, это подействует на элементы <a href="#">Типы ремонта</a>. Скорее всего, автор имел в виду чтобы стили действовали на список верхнего уровня, но не на его чайлды. 9 ноя 2022 в 10:53

2 ответа 2

0

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

.header-menu-list {
  font-weight: bold; 
  color: red;
  background-color: pink;
}

.header-menu-list ul {
  font-weight: initial; /* ресетим к исходному значению */
  color: initial; /* ресетим к исходному значению */
  background-color: initial; /* ресетим к исходному значению, но оно  равно прозрачному цвету */
    background-color: white; /* указываем явно */
}
<div class="header-menu d-lg-block">
  <div class="header-menu-inner">
    <ul class="header-menu-list">
      <li class="parent">
        <a href="#">Типы ремонта</a>
        <div class="header-dropdown-menu">
          <div class="header-dropdown-menu-inner">
            <ul class="header-dropdown-menu-list">
              <li>
                <a href="#">Черновой ремонт</a>
              </li>
              <li>
                <a href="#">Чистовой ремонт</a>
              </li>
              <li><a href="#">Предпродажный ремонт</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li class="parent">
        <a href="#">Услуги</a>
        <div class="header-dropdown-menu">
          <div class="header-dropdown-menu-inner">
            <ul class="header-dropdown-menu-list">
              <li>
                <a href="#">Перегородки и ГКП конструкции</a>
              </li>
              <li>
                <a href="#">Штукатурные работы</a>
              </li>
              <li><a href="#">Стяжка пола</a></li>
              <li><a href="#">Звукоизоляция</a></li>
              <li><a href="#">Плиточные работы</a></li>
              <li><a href="#">Малярные работы</a></li>
              <li><a href="#">Проектирование</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li>
        <a href="#">О компании</a>
      </li>
      <li>
        <a href="#">Примеры работ</a>
      </li>
      <li class="current">
        <a href="#">Контакты</a>
      </li>
    </ul>
  </div>
</div>

-1

можно попробовать ::first-line

1
  • Вы уверены, что вообще понимаете, для чего это используется? 9 ноя 2022 в 10:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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