JSFiddle - React, Tailwind, and code Playground

by Mariagrazia_Lunghi

HTML

<script src="http://modernizr.com/downloads/modernizr.js"></script>
<!-- <div>
<span>uno</span>
    <div>
<span>due</span>
<span>tre</span>
</div>
</div>
<div>
<span>quattro</span>
<span>cinque</span>
<span>sei</span>
</div>

<span>sette</span>
<span class="a">otto</span>

<span>nove</span>

<span>dieci</span>
<b>tre.1</b>
<br>
<br>
<!-- 
<a id="a" data-info="info1">uno</a>
<a id="b" data-info="info2">due</a>
<a id="c" data-info="info3">tre</a>
<a id="d" data-info="info4">quattro</a>
<a id="e" data-info="info5">cinque</a>
<a id="f" data-info="info6">sei</a>


<a href="#d">D</a>
<a href="#f">F</a>
-->

<a id="a" data-info="info1">uno</a>
<span>Tab1</span>
<a id="b" data-info="info2">due</a>
<span>Tab2</span>
<a id="c" data-info="info3">tre</a>
<span>Tab3</span>
<a id="d" data-info="info4">quattro</a>
<span>Tab4</span>
<a id="e" data-info="info5">cinque</a>
<span>Tab5</span>
<a id="f" data-info="info6">sei</a>
<span>Tab6</span>

<a href="#d">D</a>
<a href="#f">F</a>

CSS

/* span:first-child{
    color:red;
}
span:last-child{
    color:blue;
}
span:nth-child(2n){
 color:red;   
}

span:nth-of-type(2n){
 color:red;   
}*/
span:not(.a){
    color:green;
}
span.a + span{
    color:blue;
}


span.a ~ span{
    color:blue;
}

span:hover ~ span{
 color:orange;   
}
a:target{
    color:red;
    
}
a:target:before{
 /* content:'☆ '; */
    content:attr(data-info);
}

a[id],span{
    display:none;

}
a:target + span{
    display:inline;
}