I have class=”hover:[&:not(.ng-invalid)]:border-gray-500″, which adds gray color to input border only when .ng-invalid class is not attached to that input while hovering over it.

Is there anything opposite of that, for example, I want to add this gray color, only when .ng-invalid is not attached and .ng-dirty is attached to the input, something like this:-

class="hover:[&:not(.ng-invalid)]:[&:has(.ng-dirty)]:border-gray-500"

for the replacement [&:has(.ng-dirty)] above, what should I write to check if .ng-dirty class is attached?

Please let me know if there are any plain css solutions too, that I should consider.