square brackets in :not([some element])

For those who are curious, the video in question is this one.

It's interesting that the brackets aren't included in the documentation, because they are required when you are attempting to select (or deselect in this case) for explicit attribute/value pairs. They aren't required if you are using the normal selector methods. I'll explain...

Say you have these two elements:

<li class="good">Superman</li>
<li class="bad">Lex Luthor</li>

You could make the background color of Lex Luthor red using either one of the following selectors (this is just for sake of discussion):

li:not(.good) {
  background-color: red;
}

li:not([class="good"]) {
  background-color: red;
}

So either of those work. But... if you change the use of brackets around (add them to the first selector and take them away from second selector), then neither of them will work (they end up failing so they do nothing):

li:not([.good]) {
  background-color: red;
}

li:not(class="good") {
  background-color: red;
}

So the brackets are required for explicit attribute/value pairs, but they can not be used with shorthand class/id selectors. Nice catch.

What I took away from the :not() lesson is that even complex selectors can be a part of the not expression, as long as they are properly written.

The case where there are also square brackets inside the parenthesis, and the reason why it's not being generally discussed in MDN :not() literature, is because in that instance Guil was actually "not-ing" an attribute selector, in this case

[type="submit"]

So maybe it's less confusing to think of those as actually belonging to the [type = "submit"] argument, and not a weird special case of not (bracket-voodoo). I know though man, watch too many of these videos in a row and suddenly nothing makes sense.