TGViewer
mefody.dev mefody.dev @mefody_dev · 5.38K subscribers
Post #295 4.43K
Псевдокласс :empty

Крис Фердинанди напоминает о том, что в CSS довольно давно работает псевдокласс :empty. Всё, что он делает, это ищет элементы, внутри которых буквально ничего нет. Акцентирую на этом внимание: нет ничего, совсем ничего, даже пробела — это важно.

Применять такой селектор удобно для тех случаев, когда с сервера могут прийти любые данные, в том числе пустые. Обычно принято в JavaScript писать логику, проверять данные, в зависимости от этого перестраивать компонент. Со списками — делать фильтрацию. Но если по какой-то причине в код компонента залезть нельзя, а в стили можно, то вот вам и решение: .card:empty { display: none; }

https://gomakethings.com/the-empty-pseudo-class-in-css/
gomakethings.com The :empty pseudo-class in CSS One of my favorite not-so-new aspects of CSS is the :empty pseudo-class. You can use this to target elements that have no children—either child elements or whitespace and text nodes—and style them differently than they would be otherwise. For example, imagine…
  • 👍 31
  • 💯 27
  • 🔥 6
  • ❤ 2
  • 👏 1
  • 🤔 1
  • 🤯 1
  • 🥴 1
  • 🐳 1
More from @mefody_dev
  1. Sep 25, 2026Эффект одометра Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я…
  2. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  3. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  4. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  5. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
  6. Sep 10, 2026MicroLighter Дейв Руперт собрал маленькую библиотечку, которая делает подсветку кода. «Ещё…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →