Skip to main content


CSS Dinner selectors game -

@supports() selector()

Note that we also have CSS.supports() for JavaScript:

CSS.supports('display: flex') // true

Pseudo-classes (:checked, :valid, :hover, :has, :not, :first-child, :nth-child...)

Pseudo-classes can be used to style an element based on its state.

All but first/last with :not

Eg if we want to set right margin to all items of an horizontal list but the last:

<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/about">About</a></li>
nav > ul > li:not(:last-child) {
margin-right: 22px;

There are other ways to do this:


You can do :not(:has(...)).

Pseudo-elements (::before, p::first-line)

Pseudo-elements can be used to style a specific part of an element.