Grow your CSS skills. Land your dream job.

Need a trick to make DIV settings take precedence

  • # August 26, 2009 at 7:00 am

    Hi,

    I have this in my html:

    <div class="Review1">
    <p class="N_Note">This is a note</p>
    </div>

    In my css the div.Review1 class is set to a background colour of yellow while the p.N_Note class has a background colour of blue.

    In IE, the background colour for this text shows as blue. This is what I would expect, but is there any way to change this behaviour without changing the html? i.e any trick I can use in the CSS so that a div.Review background colour always overrides the background colour of a note that is inside the div tag?

    Thanks,

    Adrian

    # August 26, 2009 at 1:16 pm

    What would be the point of that? Don’t give the paragraph tag a class if you dont want it to pick up the class rule.

    # August 26, 2009 at 3:53 pm

    We are creating online help and PDF user manuals from a single (xml) source using predefined styles. E.g. for notes we use p.N_Note. Ordinarily there are no DIV tags…we add them to specific parts of the source so that reviewers can see what they need to review; in the CSS we set the div.review background colour to yellow. Then before creating the final output we remove the div.review style definition from the CSS (or set it to no colour) so that the highlighting is removed from the output. Easy and low risk.

    This works fine except for a few styles that have background colours applied to them — the styles override the container div background colour. We would like a way to override this.

    Since posting this question I have learned that one way to do what we want is by adding a definition such as the following to the CSS:

    #ID1 p.N_Note
    {
    background-color:Yellow;
    }

    …and applying ID="ID1" to the particular div tags concerned

    Unless there is a way to do this without editing the html code we will go with this.

    Thanks,

    Adrian

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".