What is :not(style) ~ :not(style) in CSS?

Question

Mui automatically added a :not(style) ~ :not(style) which I needed an !important to override in my sx.

.css-1rb8ayf-MuiStack-root > :not(style) ~ :not(style) {
  margin-top: 40px;
}
.css-d13d9m-MuiStack-root {

  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
}

What is this :not(style) ~ :not(style) ?

Thanks very much !

Answer 1

This selector will apply it's styles to all elements that are not a style in the .css-1rb8ayf-MuiStack-root element and and are preceded by another element that is not a style element:

.css-1rb8ayf-MuiStack-root > :not(style) ~ :not(style) {
    color: red;
}

<div class="css-1rb8ayf-MuiStack-root">
    <style></style>
    <style></style>
    <p>Will not be targeted</p>
    <p>Will be targeted</p>
</div>

If you don't want to use !important, you could also use the same selector again:

.css-1rb8ayf-MuiStack-root,
.css-1rb8ayf-MuiStack-root > :not(style) ~ :not(style) {
    margin-top: 0;
}