How to change a element's style in a class

Question

So I have this HTML element that adds/logs some paragraphs to it.

Here is an example of the HTML :

 <div id="team_log_actual" class="log"> <p><b>[<span style="color: #0FF">Captain</span>] <span style="color: #0FF;">☘️Ｂ☘ＮＫ☘️</span>&lt;100001177&gt;</b> is using station: Helm (Starter).</p> <p><b> <span style="color: #FFF;">RegularHacker</span>&lt;1322&gt;</b> unloaded an RC turret.</p> <p><b> <span style="color: #FFF;">RegularHacker</span>&lt;1322&gt;</b> is using station: Fabricator (Munitions).</p> <p><b>[<span style="color: #0FF">Captain</span>] <span style="color: #0FF;">☘️Ｂ☘ＮＫ☘️</span>&lt;100001177&gt;</b> is using station: Helm (Starter).</p> <p><b> <span style="color: #FFF;">RegularHacker</span>&lt;1322&gt;</b> is using station: Fabricator (Munitions).</p> <p><b>[<span style="color: #0FF">Captain</span>] <span style="color: #0FF;">☘️Ｂ☘ＮＫ☘️</span>&lt;100001177&gt;</b> is using station: Fabricator (Munitions).</p> </div> 

In that HTML you can see "is using station: Fabricator (Munitions)" inside one of those paragraphs.

So if a paragraph with that text gets created(logged) in that DIV with the class "log" . Change that paragraph's style. Like this:

Original:

 <p><b>[<span style="color: #0FF">Captain</span>] <span style="color: #0FF;">☘️Ｂ☘ＮＫ☘️</span>&lt;100001177&gt;</b> is using station: Fabricator (Munitions).</p> 

Change into:

 <p><b>[<span style="color: #00FF00">Captain</span>] <span style="color: #0FF;">☘️Ｂ☘ＮＫ☘️</span>&lt;100001177&gt;</b> is using station: Fabricator (Munitions).</p> 

Changes the first span's color...

I have no idea how to do such a thing. Possibly using innerHTML ?

Answer 1

 Add an id to your html like:
 <p id="span"><b>[<span style="color: #0FF">Captain</span>] <span 
 style="color: #0FF;">☘️Ｂ☘ＮＫ☘️</span>&lt;100001177&gt;</b>

 and in you js file write:
 Let span=getElementById="span";
 Span.addEventListener("click",function(){
 Span.style.color="red or any wanted color"
 })