For coders TYPO3 Tech Corner

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

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

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.


"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