Доброго времени суток, подскажите пожалуйста, как реализовать следующую задачу есть

Question

Доброго времени суток, подскажите пожалуйста, как реализовать следующую задачу есть

контейнер с таким набором элементов
<div class='wrapper'>
<div class='block'></div>
<div class='block blue'></div>
<div class='block blue'></div>
<div class='block blue'></div>
<div class='block blue'></div>
<div class='block red'></div>
<div class='block green'></div>
</div>
Так вот нужно чтобы для подряд идущих элементов с классом blue смежные границы например были красного цвета , т.е. для первого только правая, для 2го левая и правая и т.д. для последнего только левая
.block.blue + .block.blue {
border-right-width: 4px;
border-right-style: solid;
border-right-color: red;
}
//
.block.blue + .block.blue {
border-left-width: 4px;
border-left-style: solid;
border-left-color: green;
}
Если с левой границей всё хорошо, то с правой не очень(
Как быть?

#css #frontend #html #programming #russian

0

05.09.2023

2 ответов

18 просмотров

Кириллл 🚀 Go Aaply

Для всех .blue + .blue задать только левый красный бордер и всё

0

06.09.2023

Андрей Гуртовой · Accepted Answer

Держи ответ из жпт Норм или дичь? Реализация границ разных цветов для смежных элементов с классом "blue" Для того, чтобы задать разные цвета границ для смежных элементов с классом "blue", вы можете использовать комбинацию CSS-селекторов и свойства border. .block.blue + .block.blue { border-right-width: 4px; border-right-style: solid; border-right-color: red; } В данном примере, мы задаем красный цвет правой границы для каждого элемента с классом "blue", который следует непосредственно за другим элементом с классом "blue". Таким образом, у каждого смежного элемента будет правая граница красного цвета. Однако, для того чтобы задать левый цвет границы, вы можете использовать следующий код: .block.blue + .block.blue { border-left-width: 4px; border-left-style: solid; border-left-color: green; } В данном примере, мы задаем зеленый цвет левой границы для каждого элемента с классом "blue", который следует непосредственно за другим элементом с классом "blue". Таким образом, у каждого смежного элемента будет левая граница зеленого цвета. Таким образом, вы можете использовать эти два кода для задания разных цветов границ для смежных элементов с классом "blue".

169 похожих чатов

Доброго времени суток, подскажите пожалуйста, как реализовать следующую задачу есть

2 ответов

Похожие вопросы