Try this. /* keep the icon hidden by default */ :is(h1, h2, h3, h4, h5, h6) .icon { visibility: hidden; } /* show the icon on focus and hover */ :is(h1, h2,

Try this. /* keep the icon hidden by default */ :is(h1, h2, h3, h4, h5, h6) .icon { visibility: hidden; } /* show the icon on focus and hover */ :is(h1, h2, h3, h4, h5, h6):focus .icon, :is(h1, h2, h3, h4, h5, h6):hover .icon { visibility: visible; } /* show the icon on devices that don't have any accessory that can hover */ @media (pointer: coarse), (any-hover: none) { :is(h1, h2, h3, h4, h5, h6) .icon { visibility: visible; } } The `pointer: coarse` media query checks if you are using a device with an input mechanism of limited accuracy (such as fingers on a touchscreen). The `any-hover: none` media query checks if none of the input mechanisms on your device support hover (such as a Surface tablet not attached with a keyboard).