15

Столкнулся с проблемой: нужно разместить стиль для соседей, которые находится слева от элемента. В моём случае, нужно, чтобы ul элемент красил элемент a в красный.

Вот мой html код:

<ul>
  <li><a href="javascript://">Пункт 1</a></li>
  <li><a href="javascript://">Пункт 2</a></li>
  <li><a href="javascript://">Пункт 3</a></li>
  <li><a href="javascript://">Пункт 4</a>
      <ul>
        <li><a href="javascript://">Пункт 1</a></li>
        <li><a href="javascript://">Пункт 2</a></li>
        <li><a href="javascript://">Пункт 3</a></li>
        <li><a href="javascript://">Пункт 4</a></li>
      </ul>
  </li>
</ul>

Конечно, у меня у второго меню стиль position:absolute и можно просто сделать вот так:

ul > li > ul {position:absolute}
ul > li > ul ~ a {color: red}
<ul>
  <li><a href="javascript://">Пункт 1</a></li>
  <li><a href="javascript://">Пункт 2</a></li>
  <li><a href="javascript://">Пункт 3</a></li>
  <li><ul>
        <li><a href="javascript://">Пункт 1</a></li>
        <li><a href="javascript://">Пункт 2</a></li>
        <li><a href="javascript://">Пункт 3</a></li>
        <li><a href="javascript://">Пункт 4</a></li>
      </ul>
      <a href="javascript://">Пункт 4</a>
  </li>
</ul>

Но в html это выглядит странно.

Простите за такой идиотский вопрос, конечно, можно добавлять какой-то класс пунктам, которые имеют второе меню, но хотелось бы обойтись без этого

3
  • 3
    В css нет селектора позволяющего выбирать соседние элементы слева.
    – Grundy
    29 дек 2016 в 8:48
  • @Grundy, и это плохо
    – Yuri
    29 дек 2016 в 8:50
  • ассоциация:stackoverflow.com/questions/1817792/… 14 янв 2017 в 17:43

4 ответа 4

14

Выбрать предыдущего соседа с помощью селектора невозможен средствами CSS. И даже в черновике CSS4 на момент написания этой возможности нет.

Поэтому да, только

  1. Через класс для соответствующего элемента. Просто добавить класс в разметку вручную.
  2. Псевдоклассы nth-child и подобные, если это подходит для данного случая.
  3. Инвертирование разметки (расположение элементов в обратном порядке в разметке) и применение flexbox.

    Мы можем инвертировать элементы либо через row-reverse/column-reverse, либо через свойство order.

    Допустим есть элементы first и second. И нужно добавить селектор, когда first перед second. Для этого нужно их поменять местами, затем применить селектор second + first.

    Первый способ (предпочтительный): Затем присваиваем контейнеру flex-direction: row-reverse; или flex-direction: column-reverse; в зависимости от разметки:

    .flex {
      display: flex;
      flex-direction: row-reverse;
    }
    
    .second + .first {
      color: red;
      margin-right: 10px;
    }
    <div class="flex">
      <div class="second">
        Second
      </div>
      <div class="first">
        First
      </div>
    </div>

    Второй способ: Затем делаем order second меньше first:

    .flex {
      display: flex;
    }
    
    .second + .first {
      color: red;
      margin-right: 10px;
    }
    
    .second {
      order: 2;
    }
    
    .first {
      order: 1;
    }
    <div class="flex">
      <div class="second">
        Second
      </div>
      <div class="first">
        First
      </div>
    </div>

  4. Через JavaScript. Добавление класса или CSS-свойств через JavaScript.

5

Т. к. в вопросе ничего не сказано про интерактивность, предположу, что надо просто покрасить все ссылки, за которыми скрывается вложенное меню. При имеющейся разметке это делается очень легко, поскольку ссылка либо идёт последней, либо за ней есть ul.

a:link, a:visited, a:hover, a:active {
  color: red;
}

a:last-child:link, a:last-child:visited, a:last-child:hover, a:last-child:active {
  color: blue;
}

a:hover, a:active {
  opacity: .5;
}
<ul>
  <li><a href="javascript://">Пункт 1</a></li>
  <li><a href="javascript://">Пункт 2</a></li>
  <li><a href="javascript://">Пункт 3</a></li>
  <li><a href="javascript://">Пункт 4</a>
      <ul>
        <li><a href="javascript://">Пункт 1</a></li>
        <li><a href="javascript://">Пункт 2</a></li>
        <li><a href="javascript://">Пункт 3</a></li>
        <li><a href="javascript://">Пункт 4</a></li>
      </ul>
  </li>
</ul>

2

Есть такая возможность выделение элементов слева:

Суть в том, что, с помощью display: flex; и свойства flex-direction: row-reverse; у контейнера, вы можете изменить порядок элементов на обратный и тогда все выделения css правых элементов будут выделять левые элементы.

less/saas:

  .container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .elem {
    background: red;
    width: 48px;
    height: 48px;
  }
  .elem:hover, .elem.active {
    background: blue;
    & ~ .elem {
      background: blue;
    }
  }

css:

  .container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .elem {
    background: red;
    width: 48px;
    height: 48px;
  }
  .elem:hover {
    background: blue;
  }

  .elem:hover ~ .elem {
      background: blue;
  }
1

Попробуйте задать свойства через псевдокласс :has(), который отображает элемент в том случае, если любой из селекторов, переданный в качестве параметра, соответствует хотя бы одному элементу.

li:has(>ul)>a {color: red}
<ul>
  <li><a href="javascript://">Пункт 1</a></li>
  <li><a href="javascript://">Пункт 2</a></li>
  <li><a href="javascript://">Пункт 3</a></li>
  <li><a href="javascript://">Пункт 4</a>
      <ul>
        <li><a href="javascript://">Пункт 1</a></li>
        <li><a href="javascript://">Пункт 2</a></li>
        <li><a href="javascript://">Пункт 3</a></li>
        <li><a href="javascript://">Пункт 4</a></li>
      </ul>
  </li>
</ul>

Ваш ответ

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

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