How to style nested element that is styled by its parent already - html

Question

An initial CSS styling cannot be overwritten by a style specificly assigned to it. How shall I structure my CSS or how can I style the nested element with blue type correctly?
js fiddle
HTML
<ul class="listing">
<li>
<p> There is plenty of wood.</p>
</li>
<li>
<div class="big">
<p> This is extra big</p>
</div>
</li>
</ul>
CSS
.listing li p{
font-size: 1em;
color: red;
}
.big p {
font-size: 2em;
color: blue;
}

Answer 1

You may try this (Example)
div.big p {
font-size: 2em;
color: blue;
}
it's all about specificity, check this article as well.
Update : Also you can be more specific like this
.listing li div.big p {
font-size: 2em;
color: blue;
}

Answer 2

While the answer you just accepted works, I'd recommend against using CSS selectors like that.
Not only do they slow down the page load when you begin to scale your site, it's bad practice in general. (Read Writing efficient CSS selectors, Code smells in CSS) You should be using the most efficient, straight-forward CSS selectors, and not giving yourself a gigantic headache by targeting descendants after descendants after descendant.
Here is a more minimal solution:
HTML
<ul class="listing">
<li>
<p> There is plenty of wood.</p>
</li>
<li>
<p class="big">This is extra big</p>
</li>
</ul>
CSS
.listing p {
font-size: 1em;
color: red;
}
.listing .big {
font-size: 2em;
color: blue;
}
http://jsfiddle.net/BKLrS/4/
Although I'd very much recommend taking this further and doing this: http://jsfiddle.net/BKLrS/5/