4
votes

JavaScript - Supprimer le 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.

javascript html css

1 commentaires

Ma réponse vous a-t-elle aidé, frère?

9 Réponses :

0
votes

Essayez le sélecteur: nth-last-child (-n + 3).

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

2 commentaires

Hey Marlaqk, je pense que la nième propriété enfant ne fonctionnera pas ici. J'ai besoin de supprimer le style des 3 dernières divs. Et peu importe le nombre de div que nous allons utiliser. Quel que soit le nombre de div que nous utilisons, notre script ou css ne devrait affecter que les 3 dernières divs.

Ou nous pouvons ajouter une classe séparée pour chaque div et nous pouvons écrire du code javascript pour supprimer cette classe séparée des trois dernières divs. Mais je ne sais pas comment faire ça.

4
votes

Une solution simple.

Vous pouvez sélectionner le dernier 3div en utilisant.

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

1 commentaires

Cela fonctionne tant que les éléments .test sont des frères et sœurs.

0
votes

Avec CSS uniquement, au cas où vous voudriez tout sélectionner après le troisième

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

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

0 commentaires

0
votes

Utilisation de JavaScript:

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

[...document.querySelectorAll('.test')]
  .splice(-3)
  .forEach(el => el.classList.remove('test'));

0 commentaires

0
votes

Pas la plus jolie façon, mais fonctionne comme un charme.

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

3 commentaires

Merci Jaapaap, pouvez-vous modifier ce code avec une autre fonctionnalité?

Je vais ajouter une classe séparée pour chaque div et je dois supprimer cela des divs placés dans la dernière rangée. Il peut s'agir de trois divs, deux divs ou un div.

@Bst_coder envoie un jsfiddle avec le html, et je verrai ce que je peux faire :)

0
votes

Cela fonctionnera pour vous,

<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:not(:nth-child(-n+3)) {
    background: #ff4040;
    color: #fff;
    display: block;
    font-size: 15px;
}

1 commentaires

Mam, il veut les 3 derniers jours, pas les 3 premiers

0
votes

Ici, j'ai créé une autre classe css pour changer le style, qui dans ce cas supprime simplement la couleur d'arrière-plan.

J'utilise JavaScript pour itérer le dernier élément de cette classe 3 fois à chaque fois, ajouter une nouvelle classe et supprimer l'ancienne classe afin que l'arrière-plan soit maintenant parti.

<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;
}
.test-no-bg {
  color: #fff;
  display: block;
  font-size: 15px;
}

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

0 commentaires

0
votes

Une solution simple. Si vous souhaitez en supprimer plus, vous pouvez mettre en boucle.

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

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

0 commentaires

0
votes

Vous feriez mieux d'utiliser le code suivant, cela réduira le nombre de lignes. Il n'est pas nécessaire d'écrire le code css séparé pour les trois derniers éléments.

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

0 commentaires