CSS: styling successors of an element

user_6702598 0
Viewed 53

What I'm searching

In CSS:
E ~ F { } stands for any F node which is preceded by an E node.
I'm searching for any E node which is succeeded by an F node

Or in other words:
I want something like of E + F {}, but

  1. not style F, but E
  2. style all E before F

Concrete problem

I have a list of sibling elements. Some of them can be .selected, one of them could be .focused, some of them can be neither. If any sibling is .focused, all .selected siblings should style in a certain way.
Example situation

<row class="selected">        content1</row>
<row class="">                content2</row>
<row class="selected">        content3</row>
<row class="selected focused">content4</row>
<row class="">                content5</row>
<row class="selected">        content6</row>
<row class="">                content7</row>

In this example content1,3,4,6 should be styled in a certain way.

I have a solution for content4 and 6, but I can't find the solution for content1 and 3.

Constraints:

  • I cannot use anything else but CSS
  • I can only work with sibling elements
  • This is for Gtk's CSS, but I guess the solution is the same as in usual CSS
gtk3 css
1 Answers

QUE: E ~ F { } stands for any F node which is preceded by an E node. I'm searching for any E node which is succeeded by an F node

ANS: You are right but E ~ F { } this is only working with an element, not with the class for that you need to use dot . like .selected.focused{ } .

.selected {
  background: #000;
  color: #fff
}
.selected.focused{
  background: green;
  color: #fff
}
<ul>
  <row class="selected"> content1</row>
  <row class=""> content2</row>
  <row class="selected"> content3</row>
  <row class="selected focused">content4</row>
  <row class=""> content5</row>
  <row class="selected"> content6</row>
  <row class=""> content7</row>
</ul>

user_169248860
Related