How to ensure mutually exclusive CSS Rules.

SamJolly
SamJolly used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
what you need to do is declare the normal h2 rule first so that all h2 will get it, then declare the h2.PageThrow second so that the page throw rules will not get overwritten by the normal h2 rules.
LZ1
Top Expert 2011
Commented:
2nd haloexpertsexchange answer. CSS reads from the top down. You will always want your default styling at the top. For example:
a{style}
h1,h2,h3,h4,h5,h6{style}

Then get more specific:
a.large{font-size:20px;}
h2.NoPageThrow{page-break-before: always;font-size:16pt;font-weight: bold;}
Dave BaldwinFixer of Problems
Most Valuable Expert 2014
Commented:
They are saying that your CSS needs to be arranged like below.  CSS is not an either or situation.  The browser checks to see if the rule matches the element definition and applies it if it does.  A general rule like 'h2' will always be applied to 'h2' elements'.  The 'h2.PageThrow' rule will be applied only to 'h2's that include the 'PageThrow' class and will overwrite any previously applied rules.  Note that if you declare 'h2's to be green in the first declaration and do not set it to something else in the second instance, it will still be green.
h2
                {
                page-break-before: always;
                font-size:16pt;
                font-weight: bold;
                }
                h2.PageThrow
                {
                page-break-before: always;
                font-size:16pt;
                font-weight: bold;
                }

Open in new window

Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

Dave BaldwinFixer of Problems
Most Valuable Expert 2014

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

Author

Commented:
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

Author

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

                page-break-before: auto

instead of:

                page-break-before: avoid;

Thanks,

Sam

Author

Commented:
thks, greatly appreciated.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial