Есть ли в CSS селектор (или любой другой способ) для «Смежный до ...»?

Question

Я пытаюсь создать HTML-макет, который будет основан на многих смежных разделах.Я хочу, чтобы где-то между ними было какое-то divs, которое контролировало бы их внешний вид.

Мой HTML-код был бы примерно таким:

<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>
<div class="color-scheme--clear"></div>
<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>

И я бы хотел, чтобы каждый section пришедший ПОСЛЕ * color-scheme div с заданным им фоном, как я пытался с этим scss:

$white: #fefefe;
$red: #c54839;
$violet: #6c195e;

.section {
    height: 15em;
    background: $white;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $red;
}


.color-scheme--violet-red ~ .section {
    background-image: linear-gradient(to right, darken($violet, 10%) 0%, darken($red, 10%) 100%);
    color: $white;
}

.color-scheme--clear ~ .section {
    background: $white;
    color: $red;
}

Вот скрипка с рабочим примером: https://jsfiddle.net/raphaelaleixo/4featqrg/ (Последние два раздела белые, но они должны быть цветными)

Дело в том, что оба последних раздела соседствуют с color-scheme--clear div И с color-scheme--violet-red, который находится нижев файле css получает приоритет и перезаписывает другой.

Мой вопрос: Есть ли какой-либо способ - с использованием только html / css - выбрать каждый элемент, который является CLOSEST рядом с другим?

Для этого html я не могу вложить эти разделы в div «контроллера цвета», и я не буду уверен, сколько будет div до следующего div «controller» (если это было известно,Я мог бы вложить несколько селекторов "ближайшие братья и сестры" и CalЯ это день).

Я очень открыт для любых хаков CSS, которые могут достичь этого макета: -)

Спасибо!

Answer 1

Одна хакерская идея - повысить специфичность каждого селектора, учитывая предыдущий color-sheme перед ним.Таким образом, чем больше color-sheme у нас есть, тем более конкретным будет селектор, поэтому он выиграет тот, что перед ним.

Конечно, вам нужно будет написать много правил CSS в зависимости от того, сколько разделов у вас будет.Вы можете рассмотреть SASS / LESS, чтобы легко сгенерировать код:

.section {
    height: 15em;
    background: white;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
}


.color-scheme--violet-red ~ .section,
[class*="color-scheme" ] ~ .color-scheme--violet-red ~ .section,
[class*="color-scheme" ] ~ [class*="color-scheme" ]  ~ .color-scheme--violet-red ~ .section,
[class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ]  ~ .color-scheme--violet-red ~ .section,
[class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ]  ~ .color-scheme--violet-red ~ .section{
    background-image: linear-gradient(to right, purple 0%, red 100%);
    color: white;
}

.color-scheme--clear ~ .section,
[class*="color-scheme" ] ~ .color-scheme--clear ~ .section,
[class*="color-scheme" ] ~ [class*="color-scheme" ] ~.color-scheme--clear ~ .section,
[class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ] ~.color-scheme--clear ~ .section,
[class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ] ~.color-scheme--clear ~ .section{
    background: white;
    color: red;
}

<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>
<div class="color-scheme--clear"></div>
<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>
<div class="color-scheme--clear"></div>
<section class="section">White</section>
<section class="section">White</section>
<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">White</section>
<section class="section">White</section>

Answer 2

Это было бы еще одно хакерское решение. Добавление селектора + для каждого .section.

Предполагая, что в каждом «цвете» есть максимальное количество .sections - вы можете сделать что-то вроде ниже (см. Демонстрацию)

Сложность состоит (очевидно) в том, что вам нужно написать столько + .section, сколько существует возможных братьев и сестер одного цвета в данном разделе

Конечно, вы можете использовать SASS / LESS для генерации кода для вас, но вам все равно нужно будет узнать, сколько нужно генерировать.

.section {
    height: 5em;
    background: white;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
}

/* up to 4 coloured sections  */
.color-scheme--violet-red + .section,
.color-scheme--violet-red + .section + .section,
.color-scheme--violet-red + .section + .section + .section,
.color-scheme--violet-red + .section + .section + .section + .section
{
    background-image: linear-gradient(to right, purple 0%, red 100%);
    color: white;
}

.color-scheme--clear + .section
{
    background: white;
    color: red;
}

<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>
<div class="color-scheme--clear"></div>
<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>
<section class="section">Colored</section>
<div class="color-scheme--clear"></div>
<section class="section">White</section>
<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>
<section class="section">Colored</section>
<section class="section">Colored</section>
<div class="color-scheme--clear"></div>
<section class="section">White</section>
<section class="section">White</section>
<section class="section">White</section>
<section class="section">White</section>
<section class="section">White</section>
<section class="section">White</section>
<div class="color-scheme--violet-red"></div>
<section class="section">Colored</section>
<section class="section">Colored</section>