Стилизация только самой новой строки вывода в div
У меня есть простое приложение, которое выводит сообщения, когда на странице выполняются некоторые действия, и это делается с помощью функции javascript createElement, я хочу добавить специальный стиль только к самому новому сообщению, поэтому, если появляются более новые сообщения старое новейшее сообщение вернется к старому стилю. Есть какой-либо способ сделать это? когда я создаюElement, кажется, что все div должны иметь один и тот же класс, и все, что я пытаюсь, просто применяет стиль ко всем сообщениям.
Так есть ли что-то, что можно использовать в CSS, что позволяет мне применять стиль только к новейшему члену определенного класса?
вот как я создаю новые сообщения
function selfMsg(message) {
const msg = document.createElement('div');
msg.style.cssText = 'display: flex; justify-content: flex-end;background-color:aquamarine';
msg.innerText = message;
display.append(msg);
}
но все, что это делает, это стилизует все div в одном стиле, и я понятия не имею, как я должен удалить стиль, если появится более новое сообщение.
В идеале я ищу что-то в CSS, что я могу использовать в своем файле таблицы стилей, который может ориентироваться на весь класс, например, как работает «.classnamehere», но применяет стиль только к самому новому члену этого класса.
добавлен. когда на страницу добавляется новый div, я хочу, чтобы новый div имел особый стиль, а старый div с этим стилем больше не имел этого стиля.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
В зависимости от контейнера, в котором находятся ваши элементы div, вы можете использовать CSS last:child (https://developer.mozilla.org/en-US/docs/Web/CSS/:последний ребенок) следующим образом:
Итак, если ваш контейнер имеет класс display, вы должны сделать
.display div:last-child {
display: flex;
justify-content: flex-end;
background-color:aquamarine
}
Если вы не знаете, как использовать это вне javascript, просто оберните приведенный выше код тегом style и добавьте его в head вашего html-документа.
Для ясности и, возможно, по причинам, связанным с предстоящими изменениями, я настоятельно рекомендую присвоить всем вашим элементам div класс при создании и использовать его, а не просто div в CSS. Просто так легче поддерживать.
.message-wrapper .message:last-child {
color: red;
}<div class = "message-wrapper">
<div class = "message">Message 1</div>
<div class = "message">Message 2</div>
<div class = "message">Message 3</div>
</div>Вы можете использовать псевдо-селектор :last-child. Что-то типа:
.display div:last-child{
// your style
}
Вы можете добавить класс к своим сообщениям следующим образом:
msg.classList.add("mystyle");
Затем используйте селектор css, чтобы применить стили только к последнему элементу этого типа.
div.mystyle:last-of-type {
/* ... your styles */
}
Вот пример, с которым вы можете поиграть, от w3schools: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_last-of-type
Если вы хотите использовать чистый javascript, вы можете использовать element.removeAttribute("style") или element.style.cssText = null, но вам придется отслеживать предыдущие элементы сообщения, или получает ВСЕ сообщения и перебирает их, удаляя стиль из всех перед добавлением нового элемента. Я бы рекомендовал просто использовать CSS.
Что-то в этом направлении
Ключ — псевдокласс :last-child
"use strict";
console.clear();
document.getElementById('add').addEventListener('click', e => {
const target = document.getElementById('add-target')
const div = document.createElement('div')
const text = document.createTextNode(`#${target.querySelectorAll('div').length+1}`)
div.appendChild(text)
target.appendChild(div)
}).container {
width: 600px;
margin: auto;
border: 1px solid gray;
}
.container > div {
--bg-in: lightgray;
--bg-out: transparent;
transition: background-color 1s;
padding: 20px;
font-family: sans-serif;
}
.container > div:not(:last-child) {
border-bottom: 1px solid gray;
-webkit-animation: anim-out 1s .3s both;
animation: anim-out 1s .3s both;
}
.container > div:last-child {
-webkit-animation: anim-in 1s both;
animation: anim-in 1s both;
}
@-webkit-keyframes anim-in {
from {
background-color: var(--bg-out, white);
}
to {
background-color: var(--bg-in, pink);
}
}
@keyframes anim-in {
from {
background-color: var(--bg-out, white);
}
to {
background-color: var(--bg-in, pink);
}
}
@-webkit-keyframes anim-out {
from {
background-color: var(--bg-in, pink);
}
to {
background-color: var(--bg-out, white);
}
}
@keyframes anim-out {
from {
background-color: var(--bg-in, pink);
}
to {
background-color: var(--bg-out, white);
}
}<button id = "add">Add</button>
<div class = "container" id = "add-target">
<div>#1</div>
<div>#2</div>
<div>#3</div>
</div>Или, что-то более сложное, с событием animationend для реализации затухания через некоторое время.
"use strict";
console.clear();
document.getElementById('add').addEventListener('click', e => {
const target = document.getElementById('add-target')
const div = document.createElement('div')
div.classList.add('in')
const text = document.createTextNode(`#${target.querySelectorAll('div').length+1}`)
div.appendChild(text)
target.appendChild(div)
})
document.addEventListener('animationend', e => {
e.target.classList.add('out');
e.target.classList.remove('in');
}).container {
width: 600px;
margin: auto;
border: 1px solid gray;
}
.container > div {
--bg-in: lightgray;
--bg-peak: gray;
--bg-out: transparent;
transition: background-color 1s;
padding: 20px;
font-family: sans-serif;
}
.container > div:not(:last-child) {
border-bottom: 1px solid gray;
}
.container > div.out {
-webkit-animation: anim-out 1s 5s both ease-out;
animation: anim-out 1s 5s both ease-out;
}
.container > div.in {
-webkit-animation: anim-in 1s both;
animation: anim-in 1s both;
}
@-webkit-keyframes anim-in {
0% {
background-color: var(--bg-out, white);
}
25% {
background-color: var(--bg-peak, black);
}
100% {
background-color: var(--bg-in, pink);
}
}
@keyframes anim-in {
0% {
background-color: var(--bg-out, white);
}
25% {
background-color: var(--bg-peak, black);
}
100% {
background-color: var(--bg-in, pink);
}
}
@-webkit-keyframes anim-out {
from {
background-color: var(--bg-in, pink);
}
to {
background-color: var(--bg-out, white);
}
}
@keyframes anim-out {
from {
background-color: var(--bg-in, pink);
}
to {
background-color: var(--bg-out, white);
}
}<button id = "add">Add</button>
<div class = "container" id = "add-target">
<div>#1</div>
<div>#2</div>
<div>#3</div>
</div>
Можете ли вы добавить свой код, чтобы обеспечить лучшее понимание