Объединение селекторов

Для того, чтобы выбрать элементы, которые одновременно удовлетворяют сразу нескольким условиям в CSS есть запись, которая фактически выполняет операцию логического умножения, «И». Селекторы, применяемые к одному элементу, в этом случае пишутся без пробелов:

.class1.class2 { }

Стили будут применяться ко всем элементам, которые одновременно имеют класс class1 и class2. Например:

<div class="class1 class2">Блок с двумя классами</div>

Псевдоклассы

Псевдокласс :not

Псевдокласс :not(селектор) является отрицающим селектором. С его помощью можно выбрать элементы, которые НЕ содержат указанный селектор:

li:not(:last-child) { }

Этот селектор выберет все теги <li>, НЕ являющиеся последними в их родителе.

В качестве селектора могут указываться псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя использовать двойной псевдокласс :not, то есть конструкция :not(:not(...)) не сработает.

Также в комбинации с :not не применяются:

• объединение селекторов: например, li:not(.heart.jack) — некорректный селектор;
• псевдоэлементы: li:not(::after) — неправильная запись;
• селекторы-потомки, групповые селекторы или комбинации: например, нельзя писать li:not(a span) или li:not(a + span).

Селектор :not можно комбинировать с другими.

Псевдокласс :nth-last-child

Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child, отсчет ведется не от первого элемента, а от последнего.

Псевдоклассы :first-of-type и :last-of-type

Псевдокласс :first-of-type выбирает первый дочерний элемент родителя с учетом тега элементов.

Псевдокласс :last-of-type выбирает последний дочерний элемент родителя с учетом тега.

Пример записи:

ul:last-of-type {
  ...
}

Псевдоклассы :nth-of-type и :nth-last-of-type

Псевдокласс :nth-of-type работает почти так же, как и :nth-child. Разница заключается в том, что он учитывает тег элемента. При помощи данного псевдокласса можно выбрать определённый по счёту дочерний элемент определённого типа.

Псевдокласс :nth-last-of-type также выбирает элементы по их расположению, учитывая их тег, но отсчет ведется от конца.