Как с CSS определить, что div шире td (без JS) в DOM

Блок div шире своего родительского td можно обнаружить только с помощью JavaScript, так как CSS не предоставляет селекторов, реагирующих на переполнение.
Для визуального выделения таких элементов в DOM можно использовать скрипт, который проверит размеры и добавит к элементу нужный класс.

Содержание

• Понимание ограничений CSS
• Можно ли это сделать только CSS‑ом?
• Практический JavaScript‑подход
• Выделение элементов в DOM

Понимание ограничений CSS

CSS‑свойство overflow только управляет отображением переполнения и не генерирует каких‑либо событий или стилей, основанных на факте, что содержимое превышает размер контейнера.
В спецификации нет селекторов вида :overflowing, :overflows, которые бы позволяли применять стили к элементу при переполнении.
Только свойства max-width, max-height, flex, grid позволяют ограничить размер, но они не сообщают о переполнении.

Согласно MDN о свойстве overflow, CSS не предусматривает селекторов, опирающихся на состояние переполнения.

Можно ли это сделать только CSS‑ом?

• Использование overflow: auto/scroll меняет визуальное поведение, но не добавляет классы или стили.
• Псевдо‑элементы ::before/::after и content работают только с текстом, а не с измерениями.
• Селектор :has() в будущих спецификациях потенциально мог бы проверить потомка, но пока не поддерживается в большинстве браузеров.
• CSS‑медиа‑запросы @media (overflow: auto) отсутствуют.

Таким образом, полностью на CSS решить задачу невозможно; единственный способ — это использовать JavaScript, который измерит размеры и сравнит их.

По данным Steve Fenton, скрипты являются единственным надёжным методом обнаружения переполнения.

Практический JavaScript‑подход

Ниже пример функции, проверяющей переполнение и возвращающей true, если div шире td.

function isOverflowing(div, td) {
  return div.scrollWidth > td.clientWidth;
}

Пояснения:

• scrollWidth – фактическая ширина содержимого div, включая невидимую часть.
• clientWidth – ширина видимой области td.

Для обработки всех таких блоков можно пройтись по дереву DOM:

document.querySelectorAll('td > div').forEach(div => {
  const td = div.parentElement;
  if (isOverflowing(div, td)) {
    div.classList.add('overflowing');
  }
});

Как отмечается в статье JavaScript Detect Hidden Child with Parent Overflow Hidden, подобные проверки работают во всех современных браузерах.

Выделение элементов в DOM

После добавления класса overflowing можно стилизовать элементы через CSS:

.overflowing {
  outline: 2px solid orange;
  background: rgba(255, 200, 0, 0.2);
}

Если нужно, чтобы подсветка обновлялась при изменении размеров, можно использовать ResizeObserver:

const observer = new ResizeObserver(() => {
  document.querySelectorAll('td > div').forEach(div => {
    const td = div.parentElement;
    if (isOverflowing(div, td)) {
      div.classList.add('overflowing');
    } else {
      div.classList.remove('overflowing');
    }
  });
});

document.querySelectorAll('td > div').forEach(div => observer.observe(div));

ResizeObserver поддерживается большинством современных браузеров, согласно MDN ResizeObserver.

Заключение

• CSS сам по себе не предоставляет механизмов обнаружения переполнения блока.
• Для выделения элементов, шире чем их родительский td, необходим JavaScript.
• Скрипт с scrollWidth/clientWidth – самый простой и надёжный способ.
• После обнаружения можно добавить класс и стилизовать элемент в CSS.

Источники

1. MDN о свойстве overflow
2. Steve Fenton – Detect Overflowing Elements
3. JavaScript Detect Hidden Child with Parent Overflow Hidden
4. MDN ResizeObserver