JSFiddle - React, Tailwind, and code Playground
HTML
<header id='header'>
<section><h4>This is header section</h4>
<div>Element 1</div>
<div data-status="finished">Element 2</div>
<div>Element 3</div>
</section>
<section>
<div>Element 4</div>
<div class="blink">Element 5</div>
<div>Element 4</div>
<div>Element 4</div>
<div class="spin">Element 4</div>
</section>
</header>
<nav id='nav'>
<h4>This is Navigation section</h4>
<section> sibling
<div><a href='#header'>(child)click to target headers element</a> </div>
<div><a href='#nav'>(child)click to target child of parent of sibling</a></div>
</section>
<section>sibling
<div data-status="finished">(child)I am child of parent of sibling</div>
</section>
</nav>
CSS
:target section div[data-status=finished]
{
color:red;
}
nav section{
border:1px solid grey;
}
a,a:visited{
color:#000;
text-decoration:none;
}