Stop CSS styles to be applied in particular sections of the code

html css coldfusion

14,040

Solution 1

If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.

You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.

Solution 2

HTML5 allows scoped stylesheets, but only Firefox supports it so far. There is also a polyfill JavaScript.

Therefore, you'll have to adapt your markup and styles so that it only matches part2, and not part1. In a pinch, you can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.

By the way, part1 should probably be a child of <body> instead of <head>.

14,040

Author by

aman.kejriwal

Updated on June 09, 2022

Comments

aman.kejriwal almost 2 years

This question may sound a bit weird/novice/stupid. Please bear with me.

The below code is a small portion of a webpage I have created using CSS, HTML and coldfusion.

        <head>
    ---------------------Part 1--------------------------------------
    <CFIF CompareNoCase('#aid#', 0)>   
                <cfinclude template="show.cfm">
        <cfabort>
    </CFIF>
    -----------------------------------------------------------------

    <link rel="stylesheet" href="styles/style.css?1322665623">
        </head>
---------------------------PART 2------------------------------------
<body id="wp-home">
<div id="wrapper">
  <div class="header left">
    <h1><a href="index.cfm" class="right logo">Name Of Client</a></h1>
    <div class="tagline">
      <span class="left blair"><a href="index.cfm" class="homelink">home</a></span>
      <span class="headerline"></span>
      <span class="right blair"><a href="index.cfm" class="homelink">antiques</a></span>
    </div>
  </div>
 --------------------------------------------------------------------

As you see, I have included a css file, style.css which contains all the style classes required to display PART 2 correctly.

Problem is, whenever part 1 is active ( is true), the same css is applied to elements in file SHOW.CFM also. This totally messes up the page's original display.

For the time being I have placed a tag below the link to stop page from processing and the css file being loaded.

I have checked show.css multiple times and can confirm that no class from styles.css is used in it.

Hence, my question is if I can stop the styles from style.css to be applied on elements loaded from SHOW.CFM

Pardon me if the question is insanely stupid ;)

aman.kejriwal about 12 years

can you please write a 2-3 line sample to explain what you mean by changing selectors?
Quentin about 12 years

Change div to #somePartOfThePage div (for example).
Alex Morales about 12 years

Then list style.css before the code that's added when the if statement is true and include the other css file in the code that shows at that time.
Alex Morales about 12 years

You can also do what I suggested and simply include the css file for part 2 after the file used for part 1. It's the same thing as what Quentin suggests since you seem to have the same selectors in both files. The one that comes later will overwrite the previous one.
meustrus almost 10 years

Browser support may be lacking, but that's what polyfills are for. Here's one for scoped stylesheets: github.com/thingsinjars/jQuery-Scoped-CSS-plugin
phihag almost 10 years

@meustrus Thanks, added that to the answer.