CSS - Pseudo classes

TIL that all modern browsers now support complex selectors in :not()! 😍

https://dabblet.com/gist/e7769cbe23d3670665e97a03fe0622d3

So you can do things like:

• .foo :not(.foo .foo *) to match things inside one .foo wrapper but not two
• .container :not(.content *) to get simple (shallow) “donut scope”

The :focus-within pseudo class becomes active when an element itself has focus or if any of its descendants does.

Take for example the following HTML code:

and the following CSS:

If the div with the class .container receives focus (it can in this case as it has a tabindex of 0, this is purely for example purposes), it will have a background colour of #aaa.

But it will also have a background colour of #aaa if any of its descendants have the focus. So if the <input> receives focus, then the div’s background will also be #aaa.

This will remove the need for JavaScript that is often used to achieve this effect.