How to prevent inherit for H1?


Tags: html,css,xhtml

Problem :

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;
}


Solution :

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!

    CSS Howto..

    Show overlay fullscreen div then hide it by clicking on it

    How to convert a jQuery fade effect in CSS?

    How can I select an nth element without knowing the element in CSS?

    How to use metro ui css sidebar and compact classes

    How do I join my list and div using css?

    How to refer to css file in codeigniter? 2.0

    How to style menu in CSS to look like a button

    How to make a CSS transform affect the flow of other elements

    How to make a pure javascript .css() function using variable variables [duplicate]

    How to change line height for small text with CSS? There seems to be a limit to how small line-height can be

    How to select an UNTAG element in CSS

    How to hide :before in overflow:hidden element

    Responsive Design - Toggle a Div's Visibility - how to integrate javascript with css @media

    How can I trigger a jQuery alert when an iframe AND its CSS is loaded and rendered?

    how do i get an div to stay in place while text around it gets bigger or shorter

    How To Set Height of Child Div According To Parent Div

    How to fix text with limited height and absolute position overflows

    CSS/XHTML: Show div after a specific count of table rows

    how to make header title with buttons

    Click radio button then show submit button

    HTML CSS, how to create a Side bar or column

    CSS: How to clear a floating object only one level, not the all the way to the left?

    How can I force a css flex child to be the only on its row?

    JQuery: How to add a CSS class to a HTML button?

    How can I create this specific layout using html and css?

    How to apply CSS to :last-child button

    How to center a single character both vertically and horizontally in a square div

    How do you size an SWF object based on a Blueprint CSS span range?

    CSS frustration: How to center floating images of different widths inside LI tags?

    how to place last div into right top corner of parent div? (css)