CODEWITHSUNDEEP
htmlcssselector
Nirewen
Nirewen

Reputation: 25

CSS - Select a next element

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;
}

Upvotes: 0

Views: 176

Answers (3)

darrylyeo
darrylyeo

Reputation: 3443

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;
}

Upvotes: 0

bullzito
bullzito

Reputation: 357

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>

Upvotes: 2

cup_of
cup_of

Reputation: 6687

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;
}

Upvotes: 0

Related Questions