如何删除css las-child添加的样式

Question

im facing problem to remove the style added with last-child attribute of css

for the first time i want last-list item to be highlighted , when a particular element is clicked it has to be highlighted

 $(function(){ $('.all-list li').click(function(){ $(this).css('background','red'); // tried to remove code added with csss, :last-child $('.all-list').last().css('background','none'); }); }); 

 ul.all-list{ list-style:none; } ul.all-list li{ display:inline-block; padding:5px; font-size:20px; } ul.all-list li:last-child{ background:red; } active-class{ background:red !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="all-list"> <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> </ul> 

Answer 1

You can use sibling to remove color expect clicked one you can try this method

 $(function(){
       $('.all-list li').click(function(){
          $(this).css('background','red');
          $(this).siblings().css('background', 'none');
       });
    });

Or

 $(function(){
    $('.all-list li').click(function(){
    $(this).css('background','red').siblings().css('background', 'none').end();
       });
     });