Develop Reference

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>

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

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:
Plain JavaScript polyfill
jQuery scoped plugin
Further Reading
HTML5 Doctor - The scoped attribute
CSSTricks - Saving the day with scoped styles
HTML5Rocks - A new experimental feature - Scoped Styles

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);
}

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.

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

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

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>');
});
});

Can I have a css div class mock a different css div class?

I just started using bootstrap for my site. I love the look and I want to make some changes to a ton of different blog post to include the bootstrap style. I don't want go through hundreds of post to change the div's class element. Can I do something like this:
<div class="important_note">
this is a old note that I want to use bootstrap styling on.
</div>
css:
<style>
.important_note{
mimick(.alert)
}
</style>
alert is a bootstrap styling.
I apologize if this is a simple question, but web dev isn't much my thing. I also couldn't find any similar questions. Thanks for your help!

with css you can do the following:
.important_note, .alert{
//styling
}
this will apply the same styling to important_note and alert classes

Without "upgrading" your CSS, if it's just about adding a class to each affected element, you can use a small script:
[].forEach.call(document.getElementsByClassName('important_note'), function(node) {
node.classList.add('alert');
});
jQuery equivalent:
$('.important_note').each(function() {
$(this).addClass('alert');
}

A lot of Jquery and check/radio/select styled elements — Flash of unstyled content

I have a page with a lot of jQuery elements (large jquery files) and the problem with this is that the styled elements that replace standard HTML elements (checkboxes, radiobuttons and selectboxes/dropdown) shows the standard appearance for some millisecond at page load.
Is there any way to make the exchanged for those elements to show faster?
The elements scripts use ready() and is placed in head. The optimal solution would be if the changed elements load direcly insteed of the standard elements (but I guess that dont work).
The plugin I use to style the elements is:
jqtransform
Selectyze
Thanks for answers.

shows the standard appearance for some millisecond at page load
You can prevent that by hiding your whole page (via display:none) until the elements are styled by your plugins:
<head>
…
<style …>
<script src="plugins…" …>
<script>
(function() {
var hide = $('<style type="text/css">body { display: none; }</style>');
$("head").append(hide);
$(document).ready(function(){
…
// apply your plugins
…
hide.remove();
});
})();
</head>

You could have your standard elements with display: none as style at page load and only show() them using JQuery after they have been styled.
Sidenote: jqTransform is no longer supported as a plugin.

styling external widget

My website has an external widget that displays a table.
The widget comes with some inline CSS. Is there a way to remove this CSS before appending the widget to my page, so that only my css file rules will apply?
The markup looks like this:
<div id="widgetContainer">
<script language='javascript' src='http://www.esake.gr/scripts/create_widget.php?pw=1&maw=242&fof=Verdana&tifs=14&tic=3A3A3A&tibc=FFFFFF&dafs=12&dac=3A3A3A&dabc=FFFFFF&ces=0&cep=1&langid=gr'></script>
</div>

You can do this using jQuery,
Assuming you'd have a parent container for your widget, you could do the following,
$("#parentContainer").children().removeAttr("style");
Just created a quick mockup here: http://jsfiddle.net/j3GPL/

your best bet will be to override the css. e.g.
td { background: #f00!important;}
see here for an example.

Add onclick with css pseudo-element after

Is it possible in my css file to do something like that?:
.myclass:after{
content:"click me";
onclick:"my_function()";
}
I want to add after all instances of myclass a clickable text, in the css style sheet.

Is it possible in my css file to do something like [see code above]?
No
The important question to ask is why.
HTML has control of the data within the webpage. Any CSS or JS is specified via the HTML. It's the Model.
CSS has control of the styles, there is no link between CSS and HTML or JavaScript. It's the View.
JavaScript has control of the interactions within the webpage, and has hooks to any and all DOM nodes. It's the Controller.
Because of this MVC structure: HTML belongs in .html files, CSS belongs in .css files, and JS belongs in .js files.
CSS pseudo-elements do not create DOM nodes. There is no direct way for JavaScript to access a pseudo-element defined in CSS, and there's no way to attach an event to said pseudo-elements.
If you've got a set structure in place, and can't add the additional content necessary to produce new links within the HTML, JavaScript can dynamically add the new elements necessary which can then be styled via CSS.
jQuery makes this very simple:
$('<span class="click-me">click me</span>').appendTo('.myclass').click(my_function);

Well,
using expression it might actually be possible for internet explorer only.
Otherwise:
No. Not at all, that's not what css is made and intended for.

If something can be done with jQuery, then it is sure that it is possible to do it without that. Lets see a data model:
<div id="container">
<div id="hasblock" onclick='clickFunc(this, event)'></div>
</div>
We need some stylesheet:
<style>
div#container { width:100px; height:50px;position relative; border:none;}
div#hasblock {width:100px; height:50px;position absolute;border:solid black;}
div#hasblock::after {content:"Click me"; position: absolute; border:solid red;
top:80px;left:0px;display:block;width:100px;height:20px; font-size:18px;}
</style>
And a code:
<script>
function clickFunc(his, event)
{if (event.clientY>his.clientHeight){console.log("It was a click");}; }
</script>

Use jQuery's After:
http://jsfiddle.net/PCRnj/