Как выбрать n-й дочерний элемент, содержащий определенный атрибут в CSS [дубликат] ⇐ CSS

[Anonymous]

Ниже приведен мой HTML-код, демонстрирующий проблему. Без изменения структуры HTML или добавления класса можно выбрать третий элемент span.chatbot-bot-response-inner, который содержит, например, img[src*='1f4e6'] (или используя атрибут alt), чтобы изменить содержащееся в нем то же дочернее изображение.

Код: Выделить всё

[img]https://s.w.org/images/core/emoji/16.0.1/svg/1f449.svg[/img]

[img]x[/img]
 Petit colis 7dt



[img]https://s.w.org/images/core/emoji/16.0.1/svg/1f449.svg[/img]

[img]https://s.w.org/images/core/emoji/16.0.1/svg/1f4e6.svg[/img]
 Petit colis 7dt



[img]https://s.w.org/images/core/emoji/16.0.1/svg/1f449.svg[/img]

[img]https://s.w.org/images/core/emoji/16.0.1/svg/1f4e6.svg[/img]
 Moyen colis 10dt


 /* this is the element for which I want to select the inner alt="📦" image*/
[img]https://s.w.org/images/core/emoji/16.0.1/svg/1f449.svg[/img]

[img]https://s.w.org/images/core/emoji/16.0.1/svg/1f4e6.svg[/img]
 Grand colis 15dt

и правило CSS, которое я использовал, но безуспешно

Код: Выделить всё

.chatbot-body .chatbot-bot-response:has(img[src*='1f4e6']):nth-child(3) img[alt='📦']{
background-color: green !important;
}

Правило, использованное выше, не работает. Выберите третий span.chatbot-bot-response-inner, если он содержит img[src*='1f4e6']
Есть ли единственное правило CSS, которое можно использовать

Подробнее здесь: https://stackoverflow.com/questions/797 ... ute-in-css