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

Also -> http://stackoverflow.com/questions/2830296/using-style-tags-in-the-body-with-other-html — adeneo, Apr 15 '14 at 19:24
See my answer [here](http://stackoverflow.com/a/16820645/2324107). Hope it help. — Karl-André Gagnon, Apr 15 '14 at 19:33

score 3 · Answer 1 · answered Apr 15 '14 at 19:25

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 '14 at 19:25

learn

290
7
26

1

Using important is a nono in CSS : https://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. – Karl-André Gagnon Apr 15 '14 at 19:29
1

No problem. I know what you mean, I wasn't thinking when I added the !important. You can upvote if you like :) – learn Apr 15 '14 at 19:31
2

@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. – Adam Grant Apr 15 '14 at 20:13
@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. – Karl-André Gagnon Apr 15 '14 at 20:28

score 0 · Answer 2 · answered Apr 15 '14 at 19:26

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 '14 at 19:26

Dryden Long

10,072
2
35
47

But if I write !important for the CSS in HTML, then both of them become green. – halilkaya Apr 15 '14 at 19:28
@halilkaya Then give them unique classes and target those – Dryden Long Apr 15 '14 at 19:29
1

@halilkaya Can you provide more context as to why you're doing it this way? This may be a flawed approach from the start. – Adam Grant Apr 15 '14 at 20:15

score 0 · Answer 3 · answered Apr 15 '14 at 19:31

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>

try doing it based on how they're being targeted, otherwise you could go inline with the styling of it. ex. `
Header
` — JacobW, Apr 15 '14 at 19:35

score 0 · Answer 4 · answered Apr 15 '14 at 19:36

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.

Adam Grant · Answer 5 · 2014-04-15T20:17:14.747

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 ;.

jQuery multiple CSS conflict

5 Answers5

Header