How to simplify CSS?-CodePudding

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.

CodePudding user response：

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;}

CodePudding user response：

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...)

CodePudding user response：

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