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.
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;}
You could group all those selectors into
[id^="cont"]:hover :where(h3, p, i) {color:#fff;}
to match any h3, p, i inside an hovered element whose id is starting with cont (instead of listing all #cont1, #cont2, #cont3...)
instead of id's (#) use class (.), and apply that to your elements..
.cont1:hover h3,.cont1:hover p,.cont1:hover i {color: #ffffff;}
or even:
.cont1:hover :where(h3, p, i){color: #ffffff;}
We also do not know your exact structure, so we can only guess what is the best way to simplify your CSS
