Contact us

For coders TYPO3 Tech Corner

Do you already know the :not() CSS selector?

Do you already know the :not() CSS selector?

The :not() selector has had a relatively large impact on how I write CSS code today. You can learn how to save yourself some time with this selector in this short article.

The :not() selector selects all elements that do not match the selector.

This helps you especially if you want to add vertical spacing to list items, for example. Using conventional selectors, the last element always has all properties.

Let's look at an example:

<ul>
      <li>Eins</li>
      <li>Zwei</li>
      <li>Drei</li>
      <li>Vier</li>
      <li>Fünf</li>
</ul>

Now we can simply use the :last-child pseudo-selector in combination with the :not() selector:

ul li:not(:last-child) {
    margin-bottom: 1rem;
}

With this selector you can now address all elements which are not the last "child" of the list.

Back

"Code faster, look at the time" - does this sound familiar to you?

How about time and respect for code quality? Working in a team? Automated tests?

Join us