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

Problem

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

Problem courtesy of: user2991371

Solution

Check if this jQuery solution will work:

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

Discussion

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.

Discussion courtesy of: Adam Botley

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;}
}
Discussion courtesy of: Jayanth Ramachandran

This recipe can be found in it's original form on Stack Over Flow.