select div by class only if previous element in DOM with particular ID exists

Question

I am trying to select a div and change its background image but only if the a element before it exists and has a certain ID. See the following:

<td class ="thumbnails">
<a name="abc" id ="def"></a>
<div class="bgimages"></div>
</td>

How would I select and change the background image of the div with class 'bgimages' based on whether or not it has the a element before it with the ID 'def'?

Possible duplicate of [CSS next element](http://stackoverflow.com/questions/3660046/css-next-element) — caramba, Mar 01 '17 at 15:44

score 2 · Answer 1 · answered Mar 01 '17 at 15:47

There is no reason to use jQuery or javascript for this, you can do with only CSS. See below example with colors.

.bgimages {
    background-color: green;
}

#def + .bgimages {
    background-color: orange;
}

<table>
  <tr>
    <td class ="thumbnails">
      <a name="abc" id ="def">yyyy</a>
      <div class="bgimages">yyyy</div>
    </td>
  </tr>
  <tr>
    <td class ="thumbnails">
      <a name="abc" id ="defxxx">yyyy</a>
      <div class="bgimages">yyyy</div>
    </td>
  </tr>
</table>

Replace background-color with background-image

Nice, people are too quick to jump to the jquery route – Pete Mar 01 '17 at 15:51 — Pete, Mar 01 '17 at 15:51

buræquete · Answer 2 · 2017-03-01T15:51:41.347

2

You can select the div element with a def id anchor before as such;

console.log($("a#def").next("div.bgimages"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class ="thumbnails">
<a name="abc" id ="def"></a>
<div class="bgimages"></div>
</td>

edited Mar 01 '17 at 15:51

answered Mar 01 '17 at 15:47

buræquete

14,226
4
44
89

select div by class only if previous element in DOM with particular ID exists

2 Answers2