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.
>Solution :
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;}