JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<ul class="has-current" data-selector>
	<li>pouet 1</li>
	<li>pouet 2</li>
	<li>pouet 3</li>
	<li class="current">pouet 4</li>
	<li>pouet 5</li>
	<li>pouet 6</li>
	<li>pouet 7</li>
	<li>pouet 8</li>
	<li></li>
</ul>

<ul class="foo">
	<li>pouet 1</li>
	<li>pouet 2</li>
	<li>pouet 3</li>
	<li class="current">pouet 4</li>
	<li>pouet 5</li>
	<li>pouet 6</li>
	<li>pouet 7</li>
	<li>pouet 8</li>
	<li></li>
</ul>

SCSS

[data-selector] li:not(.current) ~ li {
  color: black;
}

[data-selector] li.current ~ li {
  color: red;
}