Столкнулся с проблемой: нужно разместить стиль для соседей, которые находится слева от элемента. В моём случае, нужно, чтобы ul элемент красил элемент a в красный.
Вот мой html код:
Конечно, у меня у второго меню стиль position:absolute и можно просто сделать вот так:
ul > li > ul {position:absolute} ul > li > ul ~ a {color: red}
Но в html это выглядит странно.
Простите за такой идиотский вопрос, конечно, можно добавлять какой-то класс пунктам, которые имеют второе меню, но хотелось бы обойтись без этого
Ответ
Выбрать предыдущего соседа с помощью селектора невозможен средствами CSS. И даже в черновике CSS4 на момент написания этой возможности нет.
Поэтому да, только
Через класс для соответствующего элемента. Просто добавить класс в разметку вручную.
Псевдоклассы nth-child и подобные, если это подходит для данного случая.
Инвертирование разметки (расположение элементов в обратном порядке в разметке) и применение 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;
}
Второй способ: Затем делаем order second меньше first
.flex { display: flex; } .second + .first { color: red; margin-right: 10px; } .second { order: 2; } .first { order: 1; }
Комментариев нет:
Отправить комментарий