nth-child

by alessia_fachin

HTML

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

<div data-nome="Sandro Paganotti">SP</div>
<div data-nome="Paolo Rossi">PR</div>
<div data-nome="Paolo Paganotti">SP</div> -->

<input>
<div data-nome="Rocky">Rocky</div>
<div data-nome="Rambo">Rambo</div>
<div data-nome="Lessie">Lessie</div>

CSS

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

div[data-nome$="Paganotti"]{
    color:red;
}

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

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

JavaScript

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