Styling only the newest line of output in div

Question

I have a simple app that outputs messages when some actions are performed on a page, and it is done through the javascript createElement function, what I want to do is add a special style to only the newest message, so if a newer messages comes up the old newest message would revert to the old style. Is there any way to do this? when I createElement it seems all the divs would have to have the same class, and anything I try just applies the style to all the messages.

So is there anything to use in CSS that allows me to only apply a style to the newest member of a certain class?

here is how I create the new messages

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

but all this does is style all the divs the same style, and I have no idea how I'm supposed to remove the style if a newer message comes up.

Ideally I'm looking for something in CSS that I can use in my stylesheet file that can target an entire class like how ".classnamehere" works, but only applies the style to the newest member of that class.

Answer 1

Depending on the container your divs are in, you can use CSS last:child ( https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child ) like this:

So if your container has the class display , you'd do

.display div:last-child {
    display: flex; 
    justify-content: flex-end;
    background-color:aquamarine    
}

In case you don't know how to use this outside of javascript, simply wrap the above code in a style tag and add it to the head of your html document.

For clarity and possibly-upcoming-changes reasons, i highly suggest giving all of your divs a class on creation and using that instead of just div in the CSS. It's just easier to maintain that way.

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

Answer 2

You can use the :last-child pseudo selector. Something like:

.display div:last-child{
  // your style
} 

Answer 3

You can add a class to your messages like this:

msg.classList.add("mystyle");

Then use a css selector to only apply styles to the last element of this type

div.mystyle:last-of-type {
    /* ... your styles */
}

Here's an example you can play with, from w3schools: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_last-of-type

If you want to use pure javascript, you could use element.removeAttribute("style") or element.style.cssText = null , but you would have to keep track of the previous message elements, or get ALL messages and loop through them, removing the style from all before adding the newest element. I'd recommend just using CSS.

Answer 4

Something along this line The key is the :last-child pseudo class

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

Or—a little bit more sophisticated—with animationend event to implement a fadeoutafter some time

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