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

Ваш ответ

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

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