Выбор всех, кроме первого, select в CSS3: селекторы

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

Если вам нужно применить стили ко всем элементам <select>, исключая первый, то у вас есть несколько вариантов:

select:not(:first-of-type) {
    /* задаём стили для всех элементов, которые не являются первым того же типа */
}

Такой способ применяет стили для всех элементов <select> кроме первого в рамках каждого родительского элемента. Если же нужно выбрать элементы <select>, находящиеся под одним родителем, можно воспользоваться другой конструкцией:

select ~ select {
    /* стили, применимые ко всем элементам <select>, находящимся за первым */
}

Теперь все элементы <select>, располагающиеся после первого и имеющие одного родителя, будут обладать заданными стилями.

Оставим первый вне изменений

В случае если вам понадобилось задать стили для целой последовательности элементов, исключая первый 'select', вам помогут псевдоклассы :not() и :first-child:

.options > div:not(:first-child) select {
    /* применяется ко всем элементам select, исключая первый в родительском контейнере с классом .options */
}

В этом примере установленные стили будут применимы ко всем элементам 'select', которые находятся внутри вложенных div'ов, при этом первый по счёту элемент 'select' в контейнере с классом .options будет исключён из списка.

Магия nth-child

Иногда требуется больше гибкости. Для этого можно объединить несколько псевдоклассов, как в примере с :nth-child() и :nth-of-type():

div.options > div:nth-child(n+2) select {
    /* стилизация элементов select, начиная со второго div внутри .options */
}

Такая запись позволяет примен ять стили к элементам 'select', расположенным во втором и последующих div'ах с родительском элементе '.options'.

Следуем за первым

Чтобы стилизовать все элементы <select>, которые следуют за первым, используйте следующую конструкцию:

div.options > div ~ div > select {
    /* стилизация элементов select, которые следуют за первым элементом */
}

В этом случае комбинатор ~, которым именуют селектор "общих последователей", позволяет выбрать все элементы <select>, являющиеся прямыми потомками div'ов, следующих за первым div.

Учитываем совместимость

Описанные выше селекторы в точности совпадают со спецификацией CSS3, однако всегда стоит помнить о необходимости проверки их совместимости с теми браузерами, которые вы планируете поддерживать, так как отдельные браузеры могут иметь свои особенности.

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

Возможно, будет полезно представить селекторы CSS3 как команду, выходящую на большую сцену:

💡💡💡💡💡 <- Все элементы 💡 <- Первый среди остальных

Псевдоклассы :not() и :first-child сконцентрируют внимание на тех элементах, которые идут следом за первым:

.element:not(:first-child) {
  spotlight: bright; /* прожектор освещает всех, кто идёт следом за первым, оставляя его в тени */
}

Соответственно, первый элемент остаётся без внимания прожектора:

💡(Тускло) 💡💡💡💡 <- Первый остался в полутени!

Особые случаи в использовании селекторов

При редактировании CSS вашего сайта важно помнить, что специфичность CSS-селекторов может значительно повлиять на результат применения стилей. Слишком обширный набор псевдоклассов может переопределить другие стили, редактирование которых заняло у вас столько времени.

Пазл из селекторов

Благодаря наличию различных CSS селекторов, вы можете опробовать разные способы применения стилей:

• Специфичность по потомству: body:not(.home) .content select – поиск элементов 'select', исключая контейнер с классом .home.
• Стилизация по состоянию: select:not(:disabled) – стили будут применяться только в том случае, когда элемент 'select' доступен для взаимодействия.
• Использование атрибутов: [data-custom]:not([data-ignore]) – стилизация элементов, обладающих атрибутом data-custom, но не содержащих data-ignore.

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

Несколько советов...

Несмотря на то, что :not() является мощным инструментом в CSS, его неправильное использование может привести к созданию чрезмерно сложных селекторов. Регулярное тестирование на различных HTML-структурах станет вашей защитой от ошибок.

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

Хотите узнать больше о CSS-селекторах и разобраться в правильном использовании? Перечень полезных ресурсов:

1. CSS :not() Псевдокласс — MDN Web Docs — пошаговая инструкция как исключать определённые элементы.
2. Справочник селекторов CSS — W3Schools — справочник CSS селекторов.
3. :nth-child | CSS-Tricks — детали использования псевдокласса nth-child.
4. CSS :nth-of-type() Псевдокласс — MDN Web Docs — подробное руководство по использованию псевдокласса :nth-of-type.
5. Selectors Level 4 — W3C — обзор новейших структурных псевдоклассов.
6. Конкретность – CSS | MDN — исчерпывающая информация о специфичности в CSS и её влиянии на стили.
7. Can I use... Support tables for CSS selectors — таблицы, демонстрирующие совместимость CSS селекторов с различными браузерами.