Change style of div inside a div. The inside div has inline css without any id and class

Question

I need to make style changes in a nested div. Code below :

<div id="video_id" class="videoLayout">
    <div style="width:695px;height:391px;"></div>
</div>

I want to change style in nested div to width:600px;height:340px; when device ipad and orientation landscape. (media query / jquery any solution will do)

Anyone has any advise. Thanks

Answer 1

iPad Landscape Orientation

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  #video_id > div { width:600px;height:400px;}
}

Answer 2

There are a few ways to access a nested <div>. The easiest way is to assign it a class/id and just target it directly! If that isn't an option, there's a few methods in CSS to target a nested element.

DEMO

Selector 1:

#container #nested-div{
}

A space between identifiers (in this case 2 IDs) means the CSS will first find the element with that first ID, then go inside and look at all it's nested (child) elements and their children etc with the second ID.

Selector 2:

#container > div{
}

This does the same thing, but because of the > between them, the CSS only looks at the direct children, it doesn't go any further down.

Answer 3

Check if this jQuery solution will work:

$('div#video_id').find('div:first').attr('style', 'width:600px; height:340px;');