Select element inline with text

Question

I want to select an element that is inside a parent , sourrounded by text (and than an element that isn't), for instance:

<div>
Lorem Ipsum
<img src="..."><!-- <<< Select this-->
dolor sit amet
</div>
<div>
<img src=""><!-- <<< not this-->
</div>

My basic idea is to make single emojis bigger and set emojis inline with text to 1rem (in a chat application, as WhatsApp, Signal, Discord... do).

I'm using Twemoji, so emojis get translated to images

:only-child() won't work for me since text doesn't count as an additional child

Answer 1

There can be many possible ways. One is to enclose the text into a span or p tag like

<div>
    <p>
    Lorem Ipsum
        <img src="..."><!-- <<< Select this-->
    dolor sit amet
    </p>
</div>
<div>
    <img src=""><!-- <<< not this-->
</div>

and then use the css selector div > p > img.

Another easier way would be to use classes or id's like

<div>
    Lorem Ipsum
        <img src="..." class="select-this-class"><!-- <<< Select this-->
    dolor sit amet
</div>
<div>
    <img src=""><!-- <<< not this-->
</div>

and then use the css selector .select-this-class

Answer 2

It seems this is not possible without changing your markup or using JavaScript. I found many questions matching your own, none with solutions.

Is there a CSS selector for the first child, taking text nodes into account?

Only child in CSS with a text sibling

CSS selector for only child, including text

CSS: first-child selector including text nodes

CSS element child vs child with text node

How to use CSS first-child but excluding text content

Answer 3

have you tried giving the div and img tag a class or id. you can do something like

.divclass > .imgclass{
//write css here
}