i'm sorry if i'm not clear but i'll try to explain my problem as best I can.

i've several divs like this in my page:

<div class="Text_part1">blablabla</div> <div class="img_container">Photo 1</div> <div class="Text_part2">blablabla</div> <div class="img_container">Photo 2</div> <div class="img_container">Photo 3</div> <div class="Text_part3">blablabla</div> <div class="img_container">Photo 4</div>

My goal is to find and change the width of divs only if they've the exact same class and are one right after the other.

I can have unlimited div with exact same class but i want to apply css only when these divs are one right after the other.

If you understood my needs in my example, you know that the "Photo 2" and "Photo3" are the divs that i want to modify.

The other "img_container" divs are alone and i don't want to apply the css on these divs.

thank you

michel spb2000's user avatar

One way using jquery (since it was tagged). This literally requires the divs to be adjacent. If any other element type (e.g. a span) were to be between two potential divs it would fail.

Assume a new class is added, named 'updateDiv', for the css.

$( 'div' ).each(function() { if ($(this).hasClass("img_container") && $(this).next().is("div") && $(this).next().hasClass("img_container")) { $(this).addClass("updateDiv"); $(this).next().addClass("updateDiv"); } });

fiddle

Or if you don't want a separate class and just want to apply css:

$( 'div' ).each(function() { if ($(this).hasClass("img_container") && $(this).next().is("div") && $(this).next().hasClass("img_container")) { let x = { "color": "green", "font-weight": "bold"} $(this).css(x); $(this).next().css(x); } });

Computable's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.