Есть ли трюк css для эмуляции CSS4: пустой селектор?

Question

Если вы хотите выбрать узлы без каких-либо детей, вы можете подумать об использовании :empty. Между тем поведение :empty очень раздражает, поскольку любые пробелы сделают это правило неприменимым. :blank селектор приходит сюда как спаситель, но браузер еще не реализовал его.

Вы знаете какой-либо трюк, чтобы выбрать элементы без каких-либо других элементов внутри?

Просто, чтобы стимулировать ваше воображение: что о чем-то вроде .parent:not(:scope > *)

Answer 1

селекторов не совпадают текстовые узлы, так что нет никакого способа, чтобы подражать либо :blank или :empty с помощью селектора.

Взято буквально, .parent:not(:scope > *) представляет собой любой элемент .parent, который не является дочерним элементом элемента :scope, независимо от того, какой из них может быть указан. Если селектор не имеет области видимости, то он эквивалентен .parent:not(:root > *), или если он отображается в таблице стилей с областью, как правило, это означает любой такой элемент, который не является братом элемента style, представляющего эту таблицу стилей с областью.

Я подозреваю, что вы имеете в виду что-то вроде .parent:not(:has(> *)), которое будет соответствовать элементам .parent, которые не имеют дочерних элементов, но не учитывают их содержание текста, опять же по той же причине, о которой я упоминал.

Хорошая новость заключается в том, в то время как вы все еще должны ждать поставщиков, чтобы обойти реализации этой новой функции, вместо реализации его в отдельном :blank псевдо они рассматривают изменение функциональности :empty вместо этого, при условии, что Безразлично» t сломать слишком много сайтов. См. this answer.

Answer 2

Как BoltClock сказал, что этого не сделать с помощью css только сейчас - это было бы возможно с селектором :contains(), хотя it was given up from the CSS3 specification.

Я знаю, что это не то, что вы искал, но здесь это решение JQuery, что я иногда использую:

(function($){ 
    $.isBlank = function(html, obj){ 
     return $.trim(html) === "" || obj.length == 0; 
    }; 

    $('li').each(function() { 
     if($.isBlank(
      $(this).html(), 
      $(this).contents().filter(function() { 
       return (this.nodeType !== Node.COMMENT_NODE); 
      }) 
     )) { 
      $(this).addClass('empty'); 
     } 
    }); 
})(jQuery); 

См jsfiddle demo. Он нацелен на любой узел, который содержит только пробелы или комментарии, но игнорирует элементы с дочерними элементами. Наверное, не идеальный, но до сих пор он работал справедливо.