How to simplify CSS?

Question

I wanted to know if there's a way I can simplify this CSS code, I'm doing it in WordPress:

#cont1:hover h3{color:#fff;}
#cont1:hover p{color:#fff;}
#cont1:hover i{color:#fff;}

#cont2:hover h3{color:#fff;}
#cont2:hover p{color:#fff;}
#cont2:hover i{color:#fff;}

#cont3:hover h3{color:#fff;}
#cont3:hover p{color:#fff;}
#cont3:hover i{color:#fff;}

I already tried to use a comma (..hover h3, p, i{...}) but it didn't work, and I don't even know how to search for it.

Answer 1

If you must use ids for whatever reason then you can do this in one line of CSS like so using the :where() pseudo selector but as Ron says, it's easier just to plonk a class in your relevant html:

:where(#cont1, #cont2, #cont3):hover :where(h3, p, i) {color:#fff;}