Transitioning and applying different styles on multiple elements simultaneously

Question

I have an anchor tag with 2 spans in it...

<a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>

On hover of this anchor tag, I want to change the color of the text inside the spans, but I want them to each be a different color. Right now, I can only get one span to transition at a time. How can I get both transitions to occur simultaneously regardless of which span inside of the anchor tag is hovered on?

#banner-logo-hello:hover,
#banner-logo-hello:active,
#banner-logo-hello:focus {
  color: red;
  transition: 0.5s;
}

#banner-logo-world:hover,
#banner-logo-world:active,
#banner-logo-world:focus {
  color: yellow;
  transition: 0.5s;
}

Answer 1

Target a:hover #span-id-name {} for both of the spans

 a:hover #banner-logo-hello { color: red; } a:hover #banner-logo-world { color: yellow; } 

 <a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a> 

You can also target via :nth-child , or it's variations like :first-child or :last-child or :nth-of-type

 a:hover span:last-child { color: red; } a:hover span:first-child { color: yellow; } 

 <a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a>