CSS - Select a next element - html

Question

I don't know how to explain this very well but...
I want to select an element but it's like "far" from other one
Like this:
<div class="image-div">
<img src="forest.png" class="image forest">
</div>
<p>
I want to change the color of this text if the image there ^ is "forest", which I'll change with JS
</p>
.image.forest [some selector idk] p {
color: red;
}
.image.train [some selector idk] p {
color: blue;
}

Answer 1

You could re-write it like this if it works for you.
<div class="image-div forest">
<img src="forest.png" class="image">
</div>
<p>I want to change the color of this text if the image there ^ is "forest", which I'll change with JS</p>
<style>
.forest + p {
color: red;
}
.train + p {
color: blue;
}
</style>

Answer 2

Why dont you just add a class to the p tag right after the forest image.
<div class="image-div">
<img src="forest.png" class="image forest">
</div>
<p class="forest-paragraph"></p>
.forest-paragraph {
color: #000;
}

Answer 3

You'd need to go from <img> to <div> to <p>, but going from <img> to <div> presents a problem: there is no CSS selector that allows one to reference an element that is higher up in the DOM tree, i.e. no child-to-parent selector.
Instead, you can apply the .forest class to the <div>.
HTML:
<div class="image-div forest">
<img src="forest.png" class="image">
</div>
<p>
I want to change the color of this text if the image there ^ is "forest", which I'll change with JS
</p>
CSS:
.forest + p {
color: red;
}