CSS: преемники стиля элемента

#css #gtk3

Вопрос:

То, что я ищу

В CSS:
E ~ F { } обозначает любой узел F, которому предшествует узел E. Я ищу
любой узел E, за которым следует узел F

Или другими словами:
я хочу чего-то подобного E F {} , но

не стиль F , но E
стиль все E раньше F

Конкретная проблема

У меня есть список родственных элементов. Некоторые из них могут быть .selected , один из них может быть .focused , некоторые из них не могут быть ни тем, ни другим. Если у кого-то есть брат или сестра .focused , все .selected братья и сестры должны выглядеть определенным образом.
Примерная ситуация

 lt;row class="selected"gt; content1lt;/rowgt; lt;row class=""gt; content2lt;/rowgt; lt;row class="selected"gt; content3lt;/rowgt; lt;row class="selected focused"gt;content4lt;/rowgt; lt;row class=""gt; content5lt;/rowgt; lt;row class="selected"gt; content6lt;/rowgt; lt;row class=""gt; content7lt;/rowgt;

В этом примере содержимое 1,3,4,6 должно быть оформлено определенным образом.

У меня есть решение для content4 и 6, но я не могу найти решение для content1 и 3.

Ограничения:

Я не могу использовать ничего другого, кроме CSS
Я могу работать только с родственными элементами
Это для CSS Gtk, но я думаю, что решение такое же, как и в обычном CSS

1. Не существует, может в конце концов. Нормальным решением является добавление класса к родительскому.

2. Могу ли я как-то добавить временный класс к родительскому внутри focused элемента в CSS ?

3. Нет. Элемент ~никак не может повлиять на то, какие правила применяются к чему-либо до него в дереве (в смысле обхода предварительного заказа) в чистом CSS.

Ответ №1:

QUE: E ~ F { } обозначает любой узел F, которому предшествует узел E. Я ищу любой узел E, за которым следует узел F

ОТВЕТ: Вы правы, но E ~ F { } это работает только с элементом, а не с классом, для которого вам нужно использовать dot . like .selected.focused{ } .

 .selected {  background: #000;  color: #fff } .selected.focused{  background: green;  color: #fff }

 lt;ulgt;  lt;row class="selected"gt; content1lt;/rowgt;  lt;row class=""gt; content2lt;/rowgt;  lt;row class="selected"gt; content3lt;/rowgt;  lt;row class="selected focused"gt;content4lt;/rowgt;  lt;row class=""gt; content5lt;/rowgt;  lt;row class="selected"gt; content6lt;/rowgt;  lt;row class=""gt; content7lt;/rowgt; lt;/ulgt;