Change CSS property of one div based on element in another div

Question

I need to change the css propery of left div if right div doesn't contain image.

<div class="wrapper">
    <div class="pg-left-bar"></div>
    <div class="pg-right-bar">
        <img src="img.jpg">
    </div>
</div>

http://jsfiddle.net/paycb/1/

If right div has no image then left div width should be change to 100% and margin removed from left div and change the display property of right div to none

I know how to change the css property using jquery only if i am looking for the element in same div

$('.pg-right-bar').has('img').css({ 'background-color': '#fff' });

But i am not sure how i can do this for the above senario.

Any help is appreciated

UPDATE

Jquery Code to achive this

if ( $('.pg-right-bar').has('img').length > 0 )
{
    $('.pg-left-bar').css({ 'background-color': '#ccc' });

}
else
{
     $('.pg-left-bar').css({ 'margin-right': '0px' });
     $('.pg-left-bar').css({ 'width': '100%' });
     $('.pg-right-bar').css({ 'display': 'none' });
}

http://jsfiddle.net/paycb/4/

Smamatti · Accepted Answer · 2013-11-19 13:40:58Z

1

Sample
http://jsfiddle.net/paycb/2/

JS

if ( $('.pg-right-bar').has('img').length > 0 )
    $('.pg-left-bar').css({ 'background-color': '#fff' });

jQuery selectors limit the amount of selected elements. Using has() limits the object count in this case to 0 if no img-tag is available. As far as I know this scenario cannot be solved with pure CSS. I gave you an example in JS.

answered Nov 19, 2013 at 13:40

Smamatti

3,9313 gold badges34 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Learning Over a year ago

I did it based on your reply jsfiddle.net/paycb/4, Please check if this approach is correct.

Smamatti Over a year ago

Looks and work fine for me. I provided a sample and had no doubt you could write the else part :-)

Collectives™ on Stack Overflow

Change CSS property of one div based on element in another div

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related