How can I apply css to an img that is not inside a disabled parent?

Question

I haven't found an effective way to apply a hover effect on an image, but only if it is not inside a disabled element. I would think this css selector would work, but it doesn't appear to. In this example, I'd want the hover effect on examples #2 and #3, but not #1, because it is in a disabled button.

*:not(*:disabled) img.action:hover {
    border-radius: 35%; 
    border: 1px;
    background: red;
}

user_1533592 · Answer

Use the disabled attribute selector => [disabled] without the everything selector inside. *:not([disabled])

Also add the child selector > to indicate that the img.action.hover is a child of *:not([disabled]) ==> *:not([disabled]) > img.action:hover

*:not([disabled]) > img.action:hover {
  border-radius: 35%;
  border: 1px;
  background: red;
}

user_6656062 · Answer

You could do the opposite: set the hover for all images and then remove it when inside a disabled element. This allows for the most generic selectors.

img.action {
  width: 60px;
  height: 60px;
}

img.action:hover {
  border-radius: 35%;
  border: 1px;
  background: red;
}

[disabled] img.action:hover {
  border-radius: initial;
  border: initial;
  background: initial;
}

However, in reality you probably don't have to account for all the possibilities under the sun, so you could narrow your selector slightly. For instance, since all your examples have a name attribute, you could do something like:

img.action {
  width: 60px;
  height: 60px;
}

[name]:not([disabled]) img.action:hover {
  border-radius: 35%;
  border: 1px;
  background: red;
}

How can I apply css to an img that is not inside a disabled parent?

2 Answers