Css3 tricks 1

by beatricevivaldi

HTML

<!--<a>
      <p>
          <span class="email">ciao</span>
      </p>
</a>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<div data-nome="cinzia ravanello">CR</div>
<div data-nome="delfino ravanello">DR</div>
<div data-nome="sonia ravanello">SR</div>-->
<p>Inserisci nome</p>
<br>
<input>
<div data-nome="Rocky">Rocky</div>
<div data-nome="Rambo">Rambo</div>
<div data-nome="Ken">Ken</div>

CSS

a .email{
    color:green;
}
a > .email{
    color:red;
}

li:nth-child(3n+1){
    font-size: 30px;
}

div[data-nome^="cinzia"]{
    background: green;
}

div[data-nome*="R"]{
    background: green;
}

div{
 display:none;
}

JavaScript

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