CSS class under an ID - css

Question

I need to target multiple elements and classes under a specific ID. NOTE: I must specify the ID. The classes will be used again with other IDs
#block-views-now-playing2-block .poster1 img
{
width:auto;
height:400px;
}
#block-views-now-playing2-block .poster1 div
{
width:263px;
height:400px;
overflow:hidden;
}
In this example the img element accepts the css. The div does not and the CSS is ignored. Why?
HTML:
<div class="block block-views contextual-links-region last even" id="block-views-now-playing2-block">
<div class="field-content poster1">
<img src="http://mysite/myposter.jpg">
</div>
</div>

Answer 1

Adding an ID in front to your CSS selector will not affect, how things are selected, but rather where. When you start with #block-views-now-playing2-block you are limiting the scope of what you're looking for to anything contained inside of #block-views-now-playing2-block
So #block-views-now-playing2-block .poster1 img reads: "Find any img that exists inside of and element with class poster1 which exists inside of an element with the ID block-views-now-playing2-block".
It works the same way for you div example.
For the CSS to find something the html would need to be structured something like this:
<div id="block-views-now-playing2-block">
<div class="poster1">
<img/>
</div>
</div>
If you were to change the CSS to #block-views-now-playing2-block.poster1 img (notice the missing space). The CSS would read: "Any img inside of an element that has an ID of block-views-now-playing2-block.poster1 and a class of poster1" The css now would only find something if the HTML were structured similar to:
<div id="block-views-now-playing2-block" class="poster1">
<div>
<img/>
</div>
</div>
(Notice the class moved up one level with the ID)
But really I can only guess why it isn't working for you without seeing your HTML.