Question

See the code below, I would like <h1> to use .page-header h1 class but it using #main h1

How to prevent that without modifying #main h1 ?

<div id='main'>
 <div class="page-header">
        <h1>This is a title</h1>
 </div>
</div>

css

#main h1 {
 line-height: 30px;
 font: 28px Arial, Helvetica, sans-serif;
 color: #333;
 font-weight: 300;
}

.page-header h1 {
    color: white;
    font-size: 28px;
    line-height: 20px;
    margin: 12px 0 11px 11px;
}

Answer 1

You need a more specific selector. Change the selector on your second rule to:

#main .page-header h1

Compare the specificity values for each selector:

#main h1               0101
.page-header h1        0011
#main .page-header h1  0111  <-- Winner!