CSS Using wildcard * all elements within a :not()

Question

I've written bits of JS that select elements within a bootstrap modal. To ensure that said JS only selects elements that belong to the modal itself (i.e within its header/footer), but excludes any element from the modal's body, I'm appending the following piece of select to my selectors :

:not(.modal-body *)

For example, if I select .btn:not(.modal-body *) in my modal, this will exclude any .btn present within the modal's body and only return the ones from the header/footer of the modal.

However, this selector seems to be not supported in some broswers that give the following error :

Message: 'Failed to execute 'querySelector' on 'Element': '.modal-footer:not(.modal-body *)' is not a valid selector.'

So I was wondering if there is an alternative way to create such a selector without using the asterisk within the not pseudo-class, which I'm assuming is the cause of the error.

Answer 1

You can achieve it by using the child combinator (>) to select direct children of the modal header/footer.

For CSS

.modal:not(.modal-body) .btn {
    /* your styles */
}

For JavaScript

document.querySelectorAll('.modal > :not(.modal-body) .btn');