Looking for a way to target an li within a specific ul that has a data-rank higher than the others, and apply different styling to it in comparison to its sibling li.
Is there a smart approach to achieve this using regular CSS or styled components?
<ul>
<li data-rank='1'>Person1
<ul>More li here</ul>
</li>
<li data-rank='1'>
Person2
<ul>More li here</ul>
</li>
<!-- The aim is to modify the style of this li as its siblings have different ranks -->
<li data-rank='2'>
Person3
<ul>More li here</ul>
</li>
<li data-rank='1'>
Person4
<ul>More li here</ul>
</li>
</ul>