Выберите <figure>, если он содержит <iframe>
Ответы 3
Вы можете использовать селектор :not:
figure:not(:empty):not(:has(img)) {
/* Your styles here */
}```
Возможно, мне нужно перефразировать свой вопрос. Я уверен, что должно быть более простое решение. Как выбрать все <фигуры>, содержащие <iframe>?
Именно то, что делает ответ @DanielBeck;)
Вы можете использовать псевдокласс :has():
figure:has(iframe) {
background-color: red;
}<figure>
With iframe
<iframe></iframe>
</figure>
<figure>
With image
<img>
</figure>figure:has(iframe)
делает этот трюк
Селектор CSS :has помогает выбирать элементы, содержащие элементы, соответствующие селектору, который вы передаете в функцию :has(). По сути, это «родительский» селектор, хотя он гораздо более полезен. Например, представьте, что вы можете выбрать все <div>, но только если они содержат <p>. https://developer.mozilla.org/en-US/docs/Web/CSS/:имеет
В «Можно ли использовать» указано: «С декабря 2023 года эта функция работает на новейших устройствах и основных версиях браузеров».
Имхо, не очень честно менять свой первоначальный вопрос, чтобы дать себе тривиальный ответ:/
Спасибо за вашу помощь всем. Я не знал о :has(), так что для меня это не был «тривиальный» ответ. Я изменил свой вопрос только тогда, когда стало очевидно, что его необходимо изменить. Я не думаю, что мне будет полезен ответ на мой собственный вопрос? И это определенно не было моим намерением. Я ответил, чтобы другие могли видеть код :has().
Наверное, лучше использовать
figure:has(iframe):not(:has(img))вместо:not(:empty)