Styling SPAN within a DIV

Question

Let's say I have the following:

<DIV class="msg-warn">
 <SPAN>some message</SPAN>
</DIV>

I would like to add a background-color to the msg-warn class on the DIV as to have the SPAN inherit the said background-color. I can't apply a class to the SPAN.

How can I achieve this? (no javascript please, just CSS)

EDIT: I found that the DIV inherits something that makes it 1px in height...

Answer 1

Just add it to .msg-warn if you want to style the whole class and have it inherit.

.msg-warn {
    background-color:#F00;
}

If you want to style all <span>s within .msg-warn target like this:

.msg-warn span {
    background-color:#F00;
}

If you want to style all direct descendant <span>s (immediate children, not children of children) use >

.msg-warn > span {
    background-color:#F00;
}

Answer 2

Have you tried something like the following?

div.msg-warn > span {
   background-color: #f00;
}