JSFiddle - React, Tailwind, and code Playground

by Stefano Bertoli

HTML

<h3>input filtrante</h3><input placeholder="inserisci valore">
    <div class="oo" data-name="stefano">Stefano</div>
    <div class="oo" data-name="horus">Horus</div>
    <div class="oo" data-name="shen">Shen</div>
    <br>
<h3>es selettori</h3>
    <a href="mailto:[email protected]">email</a>: <span>Stefano</span><br>
<a href="mailto:[email protected]">email</a>: <span>horus</span><br>
    <a href="mailto:[email protected]">email</a>: <span>shen</span><br>
<!--Selettori: ^ inizia con, * contiene, $ finisce con-->
<!-- selettore ~ tutti gli emel che seguono, + quello successivo (come  fratelli, se volevo i discendenti, lo spazio oppure il > per quelli diretti-->
<h3>tab navigation senza js</h3>
        <a href="#capitolo1">tab1</a> 
        <a href="#capitolo2">tab2</a> 
        <a href="#capitolo3">tab3</a> 

<div>        
        <a id="capitolo2"></a><p>stefanino c'è</p>
        <a id="capitolo3"></a><p>horus rulez</p>
        <a id="capitolo1"></a><p>shen is here!</p>
</div>

CSS

a[href$="[email protected]"] ~ span{
    color:red;}
a:not([href$="[email protected]"]) + span{
    font-size:30px;
}
p{/*display:none;*/opacity:0; 
position:absolute;/*i p sono di posizione 0,0 rispetto alla div*/
transition: opacity 1s;}
p:last-of-type{/*display:block;*/ opacity:1;}
a:target + p{opacity:1;}
a:target + p ~ p {opacity:0;}
div {position:relative; /*definisco la posizione relativa per i figli p che avranno pos assoluta rispetto a lui*/}
/* position absolute cerca il primo elem padre di position relative
quindi il contenitore sarà relative e gli elem contenuti potranno essere piazzati come assoluti rispetto ad esso, se non spedifico il contenitore padre, sarà la window*/

JavaScript

$('.oo').hide();
$('input').on("input",function(){$('div').hide();
    $('div[data-name*="'+$(this).val()+'"]').show();
});