CSS. Change color of inner element which already has color on hover outer element

Question

For example I have:

<style>
.a:hover {
  color: white;
}
.a {
  color: blue;
}
.b {
  color: red;
}
</style>
<div class="a">
  <div>First</div>
  <div class="b">Second</div>
</div>

How do I make both inner divs go color: white while i want them to be different color not on hover? Cant figure it out. It just wont change color of second one, no matter what I try.

They both at the same time should become white, not line by line.

Answer 1

You can use this:

.a:hover .b, .a:hover div {
    color: white;
}
.a {
    color: blue;
}
.b {
    color: red;
}

<div class="a">
    <div>First</div>
    <div class="b">Second</div>
</div>

or

.a:hover div{
    color: white;
}
.a {
    color: blue;
}
.b {
    color: red;
}

<div class="a">
    <div>First</div>
    <div class="b">Second</div>
</div>