CODEWITHSUNDEEP
javascripthtmlcss
Vinz243
Vinz243

Reputation: 9938

How to include CSS for a specific part of the page

In my website, the users have to enter markdown in a textarea, for which I am using a markdown editor. The problem is: it uses icomoon font, and my websites too. Both uses the same class to define the fonts, but not both uses the same icons. The question is simple: is there a way to define the editor.css for a special div?

Like that:

<div css="editor.css"></div>

Upvotes: 0

Views: 199

Answers (7)

hitautodestruct
hitautodestruct

Reputation: 20820

Namespace your editor styles

You can add a selector that namespaces your editor and allows you to style it:

<div class="editor-style">
  <div id="cool-custom-editor">...</div>
</div>

In your css:

.editor-style .icon-thumbs-up { color: green; }

Using Scoped Styles (needs polyfill)

As mentioned in @adeneo's comment below your question there is the option of using scoped style tags.

Supposing your editor looks like this:

<div id="cool-custom-editor">...</div>

You can apply a specific style using the scoped attribute like so:

<div>
  <style scoped>@import url(editor.css);</style>
  <div id="cool-custom-editor">...</div>
<div>

Caveats

According to can I use the scoped attribute is only natively supported by Firefox 26+.

If you want to use it you will have to polyfill:

Further Reading

Upvotes: 1

Kwaasi Djin
Kwaasi Djin

Reputation: 125

You dont need multiple files. You can give the div an id or class like so

  <div class="div1">
      <span></span
    ...
  </div>

and now in you css you do this

   .div1 span{
        font:(whatever font);
     }

Upvotes: 1

G&#252;ven Altuntaş
G&#252;ven Altuntaş

Reputation: 253

not a good way but it can help:

$("[css]").each(function(i){
    var elm = $(this);
    $.when($.get(elm.attr("css"))).done(function(response) {
        var newresponse=response.replace(/(.+{)/gi,".customCss"+i+" $1");
        elm.addClass("customCss"+i);
        elm.before('<style>'+newresponse+'</style>');
    });
});

Upvotes: 0

Vinz243
Vinz243

Reputation: 9938

OK solved: renaming the classes in editor for icomoon was a lot easier than I dared tough.

Upvotes: 0

schnawel007
schnawel007

Reputation: 4020

Give the DIV a Class and then add a CSS file like this:

.markdown
{
color: red;
}

If you import a new css dynamic, the old styles will be overwritten.

Some help, for dynamic css loading: How to apply inline and/or external CSS loaded dynamically with jQuery

Upvotes: 3

Hamza MHIRA
Hamza MHIRA

Reputation: 157

No you can't do that.. I think you should solve the conflit by changing the icomoon class names in this file.

Upvotes: 0

LorDex
LorDex

Reputation: 2636

I don't think so, no. At least not without using any js workarounds. The best solution would be to use kind of namespace for user-specific css classes.

Upvotes: 0

Related Questions