Question

I have this piece of code, that it refuses to work without the !important (which I never want to use, because I know there is always a way to do without it).

The interesting thing is that the CSS line is after everything else (and as far as I know, this should overwrite the other stuff)

live demo jsFiddle

HTML Structure:

<div id="body">
    <div class="box">
        <p>...</p>
    </div>
    <p>...</p>
</div>

CSS:

#body{
    padding:18px 35px;
}

#body p{
    margin-bottom:18px;
}

.box{
    background:#ddd;
    border:1px solid #000;
    padding:5px;
}

.box p{
    margin:0;/*works with !important*/
}

Answer 1

It’s because the ID of #body p is a more specific selector than the class of .box p. The important simply overrides that cascade.