Измените CSS с помощью тега i class

У меня есть ситуация, когда я пытаюсь обновить css для трех разных элементов div, которые одинаковы, за исключением их тегов класса i (каждый из них имеет другой значок). Я пытаюсь изменить цвет каждого из них, и я могу изменить только css или javascript (Canvas LMS). Я могу изменить их все, но я не могу определить степень детализации и изменить каждую в отдельности. Вот эти три:

<div class = "ic-notification ic-notification--admin-created ic-notification--info">
        <div class = "ic-notification__icon" role = "presentation">
          <i class = "icon-info"></i>
          
  <div class = "ic-notification ic-notification--admin-created ic-notification--info">
            <div class = "ic-notification__icon" role = "presentation">
              <i class = "icon-calendar-month"></i>

 <div class = "ic-notification ic-notification--admin-created ic-notification--info">
            <div class = "ic-notification__icon" role = "presentation">
              <i class = "question"></i>

Любые идеи с использованием css или javascript?

Спасибо!

Есть ли родительский div элемента класса ic-уведомление? Если да, то мы можем использовать свойство css: nth-child (n), например .ic-notification: nth-child (1) {...} или .ic-notification: nth-child (2) {...}.

Raeesh Alam 07.04.2021 06:54

Положение элементов варьируется. Это объявления, созданные с помощью редактора форматированного текста.

Nodin de Saillan 07.04.2021 19:53
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
53
1

Ответы 1

Есть много способов добиться этого, в зависимости от ваших общих потребностей, вот несколько простых:

  • Выберите класс в значке; или же
  • Javascript (отредактировано)

// select class
const icon = document.querySelector(".icon-info");
const calMonth = document.querySelector(".icon-calendar-month");
const question = document.querySelector(".question");

// Apply logic if need
// set color
icon.addEventListener('click', ()=> {
  icon.style.color = "blue";
})
calMonth.style.color = "red";
question.style.color = "green";
/* Use css to select icon class (if static) */
.icon-info {
  color: pink;
}

.icon-calendar-month {
  color: purple;
}

.question {
  color: yellow;
} 
<div class = "ic-notification ic-notification--admin-created ic-notification--info">
        <div class = "ic-notification__icon" role = "presentation">
          <i class = "icon-info">INFO - BLUE</i></div></div>
          
  <div class = "ic-notification ic-notification--admin-created ic-notification--info">
            <div class = "ic-notification__icon" role = "presentation">
              <i class = "icon-calendar-month">CALENDAR MONTH - RED</i></div></div>

 <div class = "ic-notification ic-notification--admin-created ic-notification--info">
            <div class = "ic-notification__icon" role = "presentation">
              <i class = "question">QUESTION - GREEN</i></div></div>
  • (пример удален из фрагмента): используйте псевдокласс: nth-child () (читать далее)

Спасибо, @Enrichdev. Это приближает меня. Каждый из элементов имеет следующий css: ic-notification__icon { background: var(--ic-brand-primary); flex: 0 0 48px; position: relative; display: flex; justify-content: center; align-items: center; border-top-left-radius: 1px; border-bottom-left-radius: 1px; box-sizing: border-box; } .ic-notification { display: flex; border: 2px solid var(--ic-brand-primary); margin-bottom: 12px; box-shadow: 0 1px 6px rgb(0 0 0 / 20%); border-radius: 3px; box-sizing: border-box; }

Nodin de Saillan 07.04.2021 19:48

Позиции элементов переменные, поэтому я не уверен, что nth-child будет работать.

Nodin de Saillan 07.04.2021 19:54

@NodindeSaillan, поможет ли Javascript? Не уверен, насколько изменчивы элементы или какая логика требуется. Я отредактировал ответ с помощью нескольких простых примеров кода JS. Если работает для вас, отлично. В противном случае нам нужны более конкретные детали.

Enrichdev 07.04.2021 22:43

Другие вопросы по теме