Compact CSS Class Selection Criteria Using OR

Question

I need to apply a style to a class .my-icon(level 3 element - image) on hover h1,h2 or h3(level 2 element - heading) that are in .container(level 1 element - Div), Below is the code

.container > h1:hover > .my-icon,
.container > h2:hover > .my-icon,
.container > h3:hover > .my-icon
 {
    display:inline;
}

Is there an easier (or compact) way to do this? sort of

.container > (h1|h2|h3):hover > .myicon {

}

or may be as follows

.container > (h1:hover|h2:hover|h3:hover) > .myicon {

    }

or any other compact way?

Answer 1

This will be possible thanks to the upcoming selector :matches():

.container > :matches(h1, h2, h3):hover > .myicon {
    display: inline;
}

:any() , , , , , :

/* 
 * Why do this when you can just compact your three selectors
 * into a single rule as you're already doing?
 */

.container > :-moz-any(h1, h2, h3):hover > .myicon {
    display: inline;
}

.container > :-webkit-any(h1, h2, h3):hover > .myicon {
    display: inline;
}

.container > :matches(h1, h2, h3):hover > .myicon {
    display: inline;
}

, , , , , .

. , .myicon - .container > :matches(h1, h2, h3), :matches(h1, h2, h3) - :

.container > *:hover > .myicon {
    display: inline;
}

(* , ; :hover CSS, , .container .myicon.)