jQuery multiple CSS conflict

Question

I have an HTML file that calls an external file inside it by using load() method of jQuery. However, the CSS in main HTML file and CSS of external file conflict. I wrote an example. How can I prevent it?

load.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function ext() {
    $('#aaa').load('external.txt');
}
</script>

<body onLoad="ext()">

<style>
    h1 {
        color:green;
    }
</style>

<h1>green</h1>

<div id="aaa"></div>

external.txt

<style>
h1 {
color:red;
}
</style>

<h1>red</h1>

PS: My purpose is NOT putting classes into CSS file such as h1 #red

<style> elements don't belong in the <body> element unless you're making use of the [scoped] attribute. — zzzzBov
– zzzzBov, Commented Apr 15, 2014 at 19:29

learn · Accepted Answer · 2014-04-15 19:25:54Z

3

You could simply just apply a class to the h1 like so: <h1 class="red">Red</h1> and then just create a class like so .red { color: red; }

answered Apr 15, 2014 at 19:25

learn

3008 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Karl-André Gagnon Over a year ago

Using important is a nono in CSS : developer.mozilla.org/en-US/docs/Web/CSS/Specificity. There is a reason why there is the word cascading in CSS. I'd upvote that answer if you remove the important and add a semi-colon.

learn Over a year ago

No problem. I know what you mean, I wasn't thinking when I added the !important. You can upvote if you like :)

Adam Grant Over a year ago

@Karl-AndréGagnon It's only a no-no in the sense that it's usually bad practice. There's nothing invalid about using !important.

Karl-André Gagnon Over a year ago

@ajkochanowicz Of course. If you use !important, it just mean that you doesn't understand the concept of CSS. The only proper way to use !important is the override inline style. so it's a no-no in sense that you should never use it except for the reason stated above.

Dryden Long · Accepted Answer · 2014-04-15 19:26:19Z

0

You can use !important to set the correct style, or look into Specificity and how to use it to your advantage here.

For example, assigning a class and then calling that class in the CSS you want will over-write the generic h1 selector.

answered Apr 15, 2014 at 19:26

Dryden Long

10.2k2 gold badges38 silver badges48 bronze badges

3 Comments

halilkaya Over a year ago

But if I write !important for the CSS in HTML, then both of them become green.

Dryden Long Over a year ago

@halilkaya Then give them unique classes and target those

Adam Grant Over a year ago

@halilkaya Can you provide more context as to why you're doing it this way? This may be a flawed approach from the start.

JacobW · Accepted Answer · 2014-04-15 19:31:12Z

0

You can try giving your h1's a class or id

ex. <h1 id="red"> Red </h1>

h1 #red {
    color: red;
}

CSS also applies the most recent given parameter. So if, in the same file you do:

h1 {
   color: red;
   color: green;
}

It will make the color green.

So since you first load the ext.txt file with the body, that css is applied, then the style tags css is applied after that and will take priority over the ext.txt file being loaded before it.

Another tidbit of relevant information. CSS will also prioritize based on how specific you are in targeting the code.

Ex.

body div h1 {
   color: blue;
}

h1 {
   color: red;
}

Even though red is called last, since blue is more specifically targeted it will take precedence.

Edit: Also make sure your style tags ARE NOT inside of the body.

<html>
    <head>
        <style>Style Tags go here!</style>
    </head>
    <body>
        Words and code and stuff
    </body>
</html>

answered Apr 15, 2014 at 19:31

JacobW

8765 silver badges15 bronze badges

1 Comment

JacobW Over a year ago

try doing it based on how they're being targeted, otherwise you could go inline with the styling of it. ex. <h1 style="color: orange;">Header</h1>

user3537431 · Accepted Answer · 2014-04-15 19:36:42Z

0

Surprising for me

I changed the body onload to Jquery's document.ready,

$(document).ready(function(){
 $('#aaa').load('external.txt');
});

</script>

<body >

I see green in Chrome, and both green and red in Firefox, with Firebug showing me both on the source HTML.

answered Apr 15, 2014 at 19:36

user3537431

Comments

Adam Grant · Accepted Answer · 2014-04-15 20:17:14Z

If you need to only target the first instance of the h1, you may want to use these styles instead:

h1             { color: green }
h1:first-child { color: red }

The following are some options for dominating one style over another. Which may or may not be what you want to do here. It's a little unclear.

There are several different options you can pursue. Because you say you don't want to use classes or IDs to accomplish this, I'll leave those out. Otherwise, you would be able to just use a class, or several classes to dominate the h1's style.

Load later

Without understanding the circumstances that make you want to use jQuery's load() to add a CSS file, if this must be, you could simple do this after the style tags.

<body onLoad="ext()">

<style>
    h1 {
        color:green;
    }
</style>

<script>
function ext() {
    $('#aaa').load('external.txt');
}
</script>

That being said, can I recommend a better way to do this other than just using <link.../>? Again, I don't know the context, but if you must use JavaScript to do this...

<body>
  <style>
    h1 { color: red; }
  </style>
  <script>
    var myStyle = document.createElement('link')
    myStyle.rel = "stylesheet"
    myStyle.href = "external.css"
    document.body.appendChild(myStyle)
  </script>
</body>

You can put this anywhere, it will automatically insert external.css before the ending </body> tag, giving it precedence with equal selectors.

Increased specificity

body h1 {
  color: green;
}

By specifying h1 is a child of whatever parent you find handy, you've effectively made your selector more specific without using classes or IDs.

!important Attribute

I hate to use this, much less recommended, but it anoints your CSS with last-word privleges.

h1 {
  color: green !important;
}

No other CSS can override this. Make sure the !important comes before the ;.

Collectives™ on Stack Overflow

jQuery multiple CSS conflict

5 Answers 5

4 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related