asked on

How to ensure mutually exclusive CSS Rules.

Hi,

I have 2 CSS rules:

h2.PageThrow
{
page-break-before: always;
font-size:16pt;
font-weight: bold;
}
h2
{
page-break-before: always;
font-size:16pt;
font-weight: bold;
}

I want to fire the first rule when

<h2 class="NoPageThrow"> which is the exception

and then with the others just <h2> which will just fire the second rule. I have a horrible feeling that <h2 class="NoPageThrow"> will fire both rules.

Thoughts appeciated.

Thanks,

Sam

ASKER CERTIFIED SOLUTION

haloexpertsexchange

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dave Baldwin

In other words, you can not make "mutually exclusive CSS Rules". You can only make new rules that can overwrite previous ones. The rules are applied in the order that they are found in the CSS section or file.

SamJolly

ASKER

Hi,

Thanks for this. Seems not to be working. What am I missing. Here is the code:

CSS
h2
{
page-break-before: always;
font-size:16pt;
font-weight: bold;
}
h2.NoPageThrow
{
page-break-before: avoid;
font-size:16pt;
font-weight: bold;
}

HTML
<h2 class="NoPageThrow">Introduction</h2>

I would expect this HTML to NOT throw a page, but it seems to be doing it. I think it may be to do with issuing a page break and then once it is issued it is too late to "avoid the page break". I guess it would work the other way round

<h2>Introduction</h2>

<h2 class="PageThrow">2nd Chapter</h2>
<h2 class="PageThrow">3rd Chapter</h2>

Then I have to use this class call for 90% of the calls as opposed to the 10%

Puzzled,

Sam

SamJolly

ASKER

OK, code above works, but my style was wrong, should be

page-break-before: auto

instead of:

page-break-before: avoid;

Thanks,

Sam

SamJolly

ASKER

thks, greatly appreciated.

Dave Baldwin

You're welcome, glad you got it worked out.