So wählen Sie das n-te untergeordnete Element aus, das ein bestimmtes Attribut in CSS enthält [Duplikat] ⇐ CSS

[Anonymous]

Unten ist mein HTML-Code, der das Problem veranschaulicht. Ohne die HTML-Struktur zu ändern oder eine Klasse hinzuzufügen, ist es möglich, das dritte span.chatbot-bot-response-innere auszuwählen, das beispielsweise img[src*='1f4e6'] enthält (oder das Alt-Attribut zu verwenden), um das darin enthaltene gleiche untergeordnete Bild zu ändern.

Code: Select all

[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

und die CSS-Regel, die ich verwendet habe, aber ohne Erfolg

Code: Select all

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

Die oben verwendete Regel funktioniert nicht und wählen Sie das dritte span.chatbot-bot-response-inner aus, wenn es img[src*='1f4e6'] enthält.
Gibt es eine einzige CSS-Regel, die verwendet werden könnte