CODEWITHSUNDEEP
javascripthtmlcss
Bst_coder
Bst_coder

Reputation: 131

JavaScript - Remove 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>

      .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.

Upvotes: 4

Views: 1018

Answers (9)

Marlaqk
Marlaqk

Reputation: 74

Try the :nth-last-child(-n+3) selector.

Soruce: https://www.w3schools.com/cssref/sel_nth-last-child.asp
https://css-tricks.com/almanac/selectors/n/nth-last-child/

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

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')
}

Upvotes: 0

Aishwarya
Aishwarya

Reputation: 645

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>

Upvotes: 0

John_ny
John_ny

Reputation: 797

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;
  }

Upvotes: 0

holydragon
holydragon

Reputation: 6728

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>

Upvotes: 0

Thanveer Shah
Thanveer Shah

Reputation: 3323

A Simple solution.

You can select the last 3div using.

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

Upvotes: 4

Jaapaap
Jaapaap

Reputation: 221

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>

Upvotes: 0

Yosvel Quintero
Yosvel Quintero

Reputation: 19060

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>

Upvotes: 0

venimus
venimus

Reputation: 6047

With CSS only, in case you want to select all after the third

  .test:nth-child(n+3) {
        background: none;
  }

https://www.w3schools.com/cssref/sel_nth-child.asp

Upvotes: 0

Related Questions