JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<button>remove class</button>
<div>
    <div class="xpto">TEXT1</div>
    <div class="xpto">TEXT2</div>
    <div class="xpto">TEXT3</div>
    <div class="xpto">TEXT4</div>
   <div class="xpto">TEXT5</div>
   <div class="xpto">TEXT6</div>
   <div class="xpto">TEXT7</div>
   <div class="xpto">TEXT8</div> 
  <div class="xpto">TEXT9</div>
</div>

CSS

/*div> div.xpto:first-child{color:green;}
div.xpto:first-of-type{color:green;}
div.xpto:nth-of-type(){color:green;}*/
div:not(.xpto) + div.xpto
{color:green; display:block;
}

div > .xpto {
    display:block;
}
div > .xpto ~ .xpto {
    display:none;
}

JavaScript

$(function() {
    $('button').on('click', function() {
        $('.xpto:first').removeClass('xpto');
    });
});