-1

I have list of elements:

<ul>
 <li class="one">some text</li>
 <li class="one">some text whit red background</li>
 <li class="two">some text</li>
 <li class="one">some text</li>
 <li class="one">some text</li>
 <li class="one">some text whit red background</li>
 <li class="two">some text</li>
 <li class="one">some text</li>
</ul>

I need mark elements with class 'one' only before class 'two'. This is possible with a clean css?

I tried nth-child and some, but unsuccessfully.

UPDATE.

Here is an example

Ed Ward
  • 1
  • 2
  • The only way that would currently be possible, is if you reversed the order of the elements in the DOM to begin with, and then used flexbox to get them _displayed_ in the reverse order again. – 04FS May 13 '19 at 07:04

1 Answers1

0

If I understood correctly you would like to target all li with a class of "one" that are followed by an li with a class of "two".

If the question was to target li with a class of "one" that follow an li with a class of "two" then the answer would be the adjacent sibling combinator:

.two + .one {...}

But it seems you need the opposite: a previous sibling combinator. Here is the question asked on a different thread. Unfortunately there doesn't seem to be an easy way to do this (in CSS).

Otherwise you can do it with JavaScript.

David
  • 138
  • 1
  • 9