CSS Not Last Child: Tips and Tricks for Web Developers

CSS :not() позволяет выбрать все элементы, которые не соответствуют определенному селектору.

Например, если мы хотим выбрать все элементы, кроме последнего, мы можем использовать :not(:last-child) селектор. Например:

ul li:not(:last-child) {
  margin-bottom: 10px;
}

Этот CSS код применится ко всем li элементам, кроме последнего, внутри всех ul элементов на странице.

Другой пример - мы хотим выбрать все элементы заголовков первого уровня (h1), которые не являются первыми дочерними элементами своих родительских элементов. Например:

h1:not(:first-child) {
  text-transform: uppercase;
}

Этот CSS код применится ко всем h1 элементам, которые не являются первыми дочерними элементами своих родительских элементов на странице.

Также можно использовать :not() селектор с другими селекторами, чтобы выбирать элементы, которые не соответствуют определенному набору свойств CSS. Например:

div:not(.special) {
  background-color: #eee;
}

Этот CSS код применится ко всем div элементам, кроме тех, которые имеют класс "special" на странице.

В целом, с помощью :not() селектора мы можем выбирать и настраивать различные элементы, исключая те, которые нам не нужны, без использования дополнительных стилей и классов в HTML верстке.