Link to home
Get AccessLog in
Avatar of SamJolly
SamJollyFlag for United Kingdom of Great Britain and Northern Ireland

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
Avatar of haloexpertsexchange
haloexpertsexchange
Flag of United States of America image

Link to home
membership
This content is only available to members.
To access this content, you must be a member of Experts Exchange.
Get Access
SOLUTION
Link to home
membership
This content is only available to members.
To access this content, you must be a member of Experts Exchange.
Get Access
SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This content is only available to members.
To access this content, you must be a member of Experts Exchange.
Get Access
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.
Avatar of 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

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

                page-break-before: auto

instead of:

                page-break-before: avoid;

Thanks,

Sam
thks, greatly appreciated.
You're welcome, glad you got it worked out.