JavaScript - Remove style

user_10614598 0
Viewed 935
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

      .test {
            background: #ff4040;
            color: #fff;
            display: block;
            font-size: 15px;
      }

I need to remove background color from last three divs using css or simple javascript. The conditions are I need to only remove styles from last three divs and its doesn't matter how many divs we are using and it should support in almost every browsers.

css html javascript
9 Answers

A Simple solution.

You can select the last 3div using.

.test:nth-last-child(-n+3) {
    /*declarations*/
}
user_108661130
user_64993190
user_6232880

Using JavaScript:

[...document.querySelectorAll('.test')]
  .splice(-3)
  .forEach(el => el.classList.remove('test'));
.test {
  background: #ff4040;
  color: #fff;
  display: block;
  font-size: 15px;
}
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

user_19325520

Not the prettiest way, but works like a charm.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
    .test {
    background: #ff4040;
    color: #fff;
    display: block;
    font-size: 15px;
    }
</style>

<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

<script>
    $(document).ready(function(){
        let $count = $('.test').length;
        let i = 0;
        $('.test').each(function(key,val){
            if(i == Number($count - 3) || i == Number($count - 2) || i == Number($count - 1)){
                $(val).css({'background':'none','color':'black'});
            }
            i++;
        });
    });
</script>
user_78494350

This will work for you,

.test:not(:nth-child(-n+3)) {
    background: #ff4040;
    color: #fff;
    display: block;
    font-size: 15px;
}
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

user_106507210

Here I created another css class to change the style, which in this case just remove the background color.

I use JavaScript to iterate the last element from that class for 3 times each time add new class and remove the old class so the background is now gone.

let element = document.getElementsByClassName("test");
let elementsToRemoveBg = 3;
while (elementsToRemoveBg--){
  element[element.length-1].classList.add("test-no-bg");
  element[element.length-1].classList.remove("test");
}
.test {
  background: #ff4040;
  color: #fff;
  display: block;
  font-size: 15px;
}
.test-no-bg {
  color: #fff;
  display: block;
  font-size: 15px;
}
<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

user_37013930

A simple solution. If you want to remove more you can put as loop.

     var e=document.querySelectorAll('.test');

for(var i=1;i<=3;i++)
{
e[e.length-i].classList.remove('test')
}
user_67669190

You better use the following code, this will reduce the number of line.There is no need write the separate css code for last three elements.

    body .test:not(:nth-last-child(-n+3)) {
        background: #ff4040;
        color: #fff;
        display: block;
        font-size: 15px;
  }
user_89729660
Related