Pass the two elements of a nest


By using pure CSS (no JavaScript), how can I make it that only when I hover both .a and .b, both .a and .b get red? (This can be interpreted as "when I hover .b, .a gets red")


<div class="a">AAAAA<div class="b">BBBBB</div></div>

Some CSS desperate failed attempts:

.b:hover .a {color: red;}
.a.b:hover {color: red;}
.b:hover + .a {color: red;}
.b:hover ~ .a {color: red;}
.b:hover < .a {color: red;}

But it feels that anything that could select a parent element won't work.

< doesn't exist and + as ~ are adjacent sibling selectors, but just for subsequent elements.

Basically, you can't do that with pure CSS because it doesn't exist something like a parent selector, which you would need to specify if .b is hovered style also parent element.