CSS: выбор всех дочерних элементов за исключением первого и последнего

Быстрый ответ

При необходимости исключить из выборки первого и последнего дочерних элементов в CSS вы можете воспользоваться псевдоклассом :not(), используя его вместе с :first-child и :last-child:

#navigation ul li:not(:first-child):not(:last-child) {
    /* Стили для элементов, исключая крайние */
}

Этот селектор применяется только к элементам, расположенным между первым и последним, и не воздействует на крайние дочерние элементы.

Обзор использования :not()

Эффективность селекторов

:not() позволяет точечно исключать элементы из выборки, минуя сложную логику, которая часто требуется для других селекторов. Отметим, что псевдокласс :not() не поддерживает несколько условий внутри себя, поэтому запись вида li:not(:first-child, :last-child) будет неверной.

Подробнее об этом расскажет наш спикер на видео

Изменение специфичности

Использование :not() увеличивает специфичность селекторов, однако его применение требует обдуманного подхода. Добавление нескольких :not() в одно и то же выражение увеличивает "вес" селектора, но такой селектор всё ещё будет менее специфичным по сравнению с классами и идентификаторами.

В случае проблем с HTML и браузерами

Если в следствие некорректной работы CSS-селекторов :first-child и :last-child («здравствуйте», Internet Explorer) возникают проблемы, то в качестве альтернативы вы можете использовать :nth-child().

Визуализация

Возьмем для примера следующую таблицу:

| Порядок попадания | Гость         | Право на подарок |
| ---------------- | ------------- | ---------------- |
| Первый           | 👤 (Пропускаем)| ❌             |
| Второй           | 👤 (Включаем)  | ✅             |
| Гости посередине | 👤 (Включаем)  | ✅             |
| Предпоследний    | 👤 (Включаем)  | ✅             |
| Последний        | 👤 (Пропускаем)| ❌             |

В данном контексте наш CSS-код "приглашает на праздник" все элементы, кроме первого и последнего.

Когда базовые селекторы не справляются

Использование :nth-child() и :nth-last-child()

Если в проекте :first-child и :last-child не справляются со своими задачами, рассмотрите возможность использования :nth-child(n) и :nth-last-child(n). Такие селекторы позволяют выбирать или игнорировать дочерние элементы в зависимости от позиции, выраженной числом или математическим выражением.

Когда CSS требует осторожности

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

Работах с классами

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

.special:not(:first-child):not(:last-child) {
    /* Внимание: здесь стили для элементов класса .special, кроме первого и последнего */
}

Полезные материалы

1. :not() – CSS: каскадные таблицы стилей | MDN — подробное изложение о применении псевдокласса :not() в CSS.
2. Полезные рецепты для :nth-child | CSS-Tricks — познакомьтесь со множеством утонченных способов использования селектора :nth-child.
3. CSS :nth-child() Selector — освойте мастер-класс по использованию селектора :nth-child(), который может стать неотъемлемой частью вашего CSS-инструментария.
4. CSS-селектор для первого элемента с классом – Stack Overflow — советы и стратегии по выбору определенных элементов без задействования первого и последнего на Stack Overflow.
5. CSS :nth-of-type() Selector — изучите :nth-of-type() как прекрасную альтернативу для точной выборки дочерних элементов.
6. Калькулятор специфичности — узнайте точный "вес" ваших селекторов, используя этот полезный сервис.
7. Приручение продвинутых CSS-селекторов — Smashing Magazine — всестороннее руководство по использованию продвинутых CSS-селекторов для более эффективного создания стилей.