Geek Answers Handbook

How to add the same class to many elements at a time?

On my website, I describe my product using an unordered list. And too many products. Now I want to add some animation to the product button, which is in the second last position. I created a class in my css file that contains my animation, and I want to add this animation to this second last one li.

I know that I can manually add lianother class to this , but the problem is that there is 713 unordered list or description of the product.

So, is it possible to add a class to all of these second last liat a time.

My product description looks like.

<ul class="product_details">
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li>Text</li>
   <li class="HERE_I_WANT_TO_ADD_THAT_CLASS">Button</li>
   <li>Text</li>
</ul>

I have an internet search but have not received a solution.

+4
4

, jQuery CSS.

.

CSS

. product_details li:nth-child(16) {
    /* YOUR ANIMATION GOES HERE */
}

jQuery

$('.product_details li:nth-child(16)').addClass('YOUR_ANIMATION_CLASS');
+2

:

$( "ul li:nth-last-child(2)" ).addClass( "CLASS_YOU_WANT_TO_ADD" );

nth-last-child , add 2 .

+11

: li product_details prev(), li

$(document).ready(function(){
  $('.product_details').find('li:last').prev('li').addClass('HERE_I_WANT_TO_ADD_THAT_CLASS');
});
+3

css3, . -

.product_details li:nth-last-child(-1){

}
+1

More articles:


All Articles