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..

    How do I get a CSS Selector to Skip Over?

    css - how to fix first td in table on top if the second td has multiline?

    How to use “currentColor” CSS 3 keyword in LESS?

    Anyone know how Atlassian sizes the height of the splitter div in Confluence?

    How to render a template containing CSS with }} sequence inside using Twig

    How to vertically center text span in fixed position div?

    How do I isolate floated content?

    How are the page-break properties in CSS supposed to work?

    How to change CSS to the same class but another input name

    How to use font-family with same name?

    How can I incorporate a slideshow into HTML?

    How to create a sub folder on Page?

    How to hide currently selected li item from being an option when user clicks dropdown again?

    CSS in CKEDITOR - How to make a HTML code like

    display in red color?

    How to make angled borders for tables.

    How to use javascript to trigger a css event for a collection of elements that have the same class/name

    how to fix an element inside bootstrap modal with respect to bootstrap modal

    How to adjust CSS to make footer fixed height?

    How to Customise the angular material date-picker?

    How to appy font color from li:hover to inner a link text using CSS

    How know CSS version - ASP.NET - VS Community 2013

    How to handle cq component with same html structure and different css?

    Google App Engine: how to use the internal CSS in the template?

    How to use a JQuery Show/Hide script, to show hidden text

    How to disable temporary cursor with javascript?

    Auto-scaled image not shown correctly with IE 10

    Inline blocks somehow don't get displayed in a straight line [duplicate]

    How to distribute DIVS evenly (horizontal and vertical) that floats with each other?

    How to customize HTML/CSS tooltips?

    How to change an image onclick while li on current status using pure CSS?