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

Эй, ребята, мне нужно удалить цвет фона из последних трех дел, используя CSS или простой JavaScript. Мне нужно удалить только стили из последних трех div, и не имеет значения, сколько div мы используем, и это должно поддерживаться практически во всех браузерах. Ребята, вы можете мне помочь?

3

10 ответы

Простое решение.

Вы можете выбрать последний 3div используя.

.test:nth-last-child(-n+3) {
    /*declarations*/
}
4
добавлено
Я ценю, что вы, ребята, поправляете меня.
добавлено автор Thanveer Shah, источник

Используя JavaScript:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

[...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>
</div> </div>
0
добавлено

Здесь я создал еще один класс CSS для изменения стиля, который в этом случае просто удаляет цвет фона.

Я использую JavaScript для итерации последнего элемента из этого класса 3 раза каждый раз, когда добавляю новый класс и удаляю старый класс, чтобы фон исчез.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
</div> </div>
0
добавлено

Только с CSS, если вы хотите выбрать все после третьего

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

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

0
добавлено

Попробуйте использовать селектор: nth-last-child ().

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

0
добавлено
Эй, Marlaqk, я думаю, что nth child property здесь не сработает. Мне нужно удалить стиль из последних 3 дел. И не имеет значения, сколько div мы собираемся использовать. Независимо от того, какое количество div мы используем в нашем скрипте или css, оно должно действовать только на последние 3 div.
добавлено автор Bst_coder, источник
Или мы можем добавить отдельный класс для каждого элемента div и написать код JavaScript для удаления этого отдельного класса из последних трех элементов div. Но я не знаю, как ты это делаешь.
добавлено автор Bst_coder, источник

Вам лучше использовать следующий код, это уменьшит количество строк. Нет необходимости писать отдельный код CSS для последних трех элементов.

    body .test:not(:nth-last-child(-n+3)) {
        background: #ff4040;
        color: #fff;
        display: block;
        font-size: 15px;
  }
0
добавлено

Простое решение Если вы хотите удалить больше, вы можете поставить как цикл.

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


e[e.length-1].classList.remove('test')
e[e.length-2].classList.remove('test')
e[e.length-3].classList.remove('test')
0
добавлено

Простое решение Если вы хотите удалить больше, вы можете поставить как цикл.

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


e[e.length-1].classList.remove('test')
e[e.length-2].classList.remove('test')
e[e.length-3].classList.remove('test')
0
добавлено

Не самый красивый способ, но работает как шарм.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
0
добавлено
Спасибо Jaapaap, можете ли вы редактировать этот код с помощью еще одной функции?
добавлено автор Bst_coder, источник
Я собираюсь добавить отдельный класс для каждого элемента div, и мне нужно удалить его из элементов div, размещенных в последнем ряду. Это может быть три div, два div или один div.
добавлено автор Bst_coder, источник
@Bst_coder Конечно
добавлено автор Jaapaap, источник
@Bst_coder отправьте jsfiddle с HTML, и я посмотрю, что я могу сделать :)
добавлено автор Jaapaap, источник

Это будет работать для вас,

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.test:not(:nth-child(n+4)) {
    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>
</div> </div>
0
добавлено
Мам, он хочет последние 3див, а не первые 3
добавлено автор Thanveer Shah, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)