CSS :first-of-type — как работает
CSS :first-of-type: принцип работы, корректный синтаксис, практический сценарий, ограничения, ошибки и актуальная совместимость.
Суть темы
У темы «:first-of-type» есть конкретная роль в области «псевдоклассы». Псевдокласс :first-of-type сопоставляет элемент с определённым состоянием или структурным условием. Для «:first-of-type» в интерфейсе с направлением письма справа налево используйте результат при системной тёмной теме и используйте нативное действие вместо имитации клика.
Перед применением «:first-of-type» сформулируйте ожидаемое поведение, затем не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса. Для «:first-of-type» такое сравнение показывает реальную причину изменения.
Синтаксис :first-of-type
Синтаксис «:first-of-type» показан на минимальном фрагменте без внешнего фреймворка. Сначала запустите исходный вариант, затем меняйте отмеченную часть.
.button:first-of-type {
outline: 2px solid #2563eb;
outline-offset: 3px;
}Как работает :first-of-type
Селектор пересчитывается браузером при изменении состояния или структуры DOM. Для «:first-of-type» проверьте две контрольные точки — результат при системной тёмной теме и порядок фокуса в дереве доступности: так видно, на каком этапе появляется итоговое поведение этой темы.
Проверка в проекте
- Не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса; результат относится непосредственно к «:first-of-type».
- Проверить вычисленное значение в DevTools и источник победившего правила при разборе «:first-of-type».
- Проверьте «:first-of-type» в интерфейсе с направлением письма справа налево через результат при системной тёмной теме и запишите наблюдаемое изменение.
Используйте «:first-of-type», когда требуется выбрать элемент по состоянию, положению или отношению к другим узлам; подтвердите выбор предметной проверкой: не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса. Для «:first-of-type» более простой вариант предпочтителен, если он сохраняет тот же смысл и поведение.
Практика с :first-of-type
Соберите «:first-of-type» в минимальном компоненте и проверьте предметное условие: не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса. Затем для «:first-of-type» замените содержимое длинным и сузьте контейнер до 320 px.
Сценарий: в интерфейсе с направлением письма справа налево.
Ошибки при работе с :first-of-type
Каскад
Состояние :first-of-type не должно быть единственным способом увидеть важное действие или информацию — это предметный риск для «:first-of-type».
Поддержка
Фиксированные размеры, которые перестают вмещать реальное содержимое при использовании «:first-of-type».
Контекст
Проверка только мышью и только на широком экране; для «:first-of-type» проверьте это отдельно.
Поддержка :first-of-type
Для «:first-of-type» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «:first-of-type»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о :first-of-type
Как понять, что «:first-of-type» выбрано правильно?
«:first-of-type» выбрано правильно, когда оно решает задачу «выбрать элемент по состоянию, положению или отношению к другим узлам», сохраняет результат в интерфейсе с направлением письма справа налево и проходит предметную проверку: не полагайтесь только на hover и сохраняйте эквивалентное состояние клавиатурного фокуса.
Нужен ли запасной вариант для «:first-of-type»?
Запасной вариант для «:first-of-type» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «:first-of-type» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.