CSS: скрыть родителя, если дочерний элемент: пустой?
Я хочу скрыть родительский тег <li>, если его дочерний тег <a> пуст. Поэтому в следующем примере я хотел бы скрыть второй <li>:
<ul>
<li>
<a href = "test1.html">Test 1</a>
</li>
<li>
<a></a>
</li>
<li>
<a href = "test2.html">Test 2</a>
</li>
</ul>Я могу связаться с <a> через li a:empty, и это работает нормально. Но как мне добраться до его родителя, <li> ? Пожалуйста, только CSS-решения... спасибо!
Пустой элемент предоставляется компанией-партнером. Они оставляют весь узел в коде, хотя в этом нет необходимости. И поскольку у каждого элемента списка есть объявление css, я хотел определить пустые элементы, чтобы скрыть их вообще. Решение, предоставленное @Gerard, просто идеально!
Ответы 1
Единственное решение для CSS — это псевдоселектор has(). К сожалению, пока не поддерживается Firefox
Возможно, вы захотите рассмотреть полифилл до тех пор.
li:has(a:empty) {
display: none;
}<ul>
<li>
<a href = "test1.html">Test 1</a>
</li>
<li>
<a></a>
</li>
<li>
<a href = "test2.html">Test 2</a>
</li>
</ul>Это потрясающе и абсолютно работает для моей проблемы - большое спасибо!
Как получить этот пустой элемент? в css нет родительского селектора. Я думаю, что лучшее решение - проверить перед тем, является ли элемент пустым или нет