У меня есть ситуация, когда я пытаюсь обновить 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?
Спасибо!
Положение элементов варьируется. Это объявления, созданные с помощью редактора форматированного текста.
Есть много способов добиться этого, в зависимости от ваших общих потребностей, вот несколько простых:
// 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>
Спасибо, @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; }
Позиции элементов переменные, поэтому я не уверен, что nth-child будет работать.
@NodindeSaillan, поможет ли Javascript? Не уверен, насколько изменчивы элементы или какая логика требуется. Я отредактировал ответ с помощью нескольких простых примеров кода JS. Если работает для вас, отлично. В противном случае нам нужны более конкретные детали.
Есть ли родительский div элемента класса ic-уведомление? Если да, то мы можем использовать свойство css: nth-child (n), например .ic-notification: nth-child (1) {...} или .ic-notification: nth-child (2) {...}.