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

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

• javascript
• jquery
• css
• media-queries

Share Improve this question Follow edited Nov 14, 2013 at 9:32 Pete 58.5k2929 gold badges130130 silver badges184184 bronze badges asked Nov 14, 2013 at 9:28 user2991371user2991371 1311 silver badge44 bronze badges 3

• ...<div id="video_id" class="videoLayout"> <div style="width:695px;height:391px;"> – user2991371 Commented Nov 14, 2013 at 9:30
• i am not sure how to drill down in 2nd div and change css / style for nested div. There is also lots of code inside 2nd div... but it's not relevent as i want to keep it as it is... just change style in nested div that's inline. – user2991371 Commented Nov 14, 2013 at 9:31
• this is how to target ipad only and to target the div you want you can use #video_id > div – Pete Commented Nov 14, 2013 at 9:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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;}
}

Check if this jQuery solution will work:

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