Avatar of SamJolly
SamJolly
Flag 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

CSSHTML

Avatar of undefined
Last Comment
Dave Baldwin

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
haloexpertsexchange

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
LZ1

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
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
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
SamJolly

ASKER
thks, greatly appreciated.
Dave Baldwin

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