Crear un nuevo estilo CSS (permanente) en jQuery

Question

Quiero crear un nuevo estilo, no solo alterar el atributo de estilo de un elemento. Aquí es un código de ejemplo para demostrar el problema:

//Create 1st element 
var element1 = $('<div />').text('element1').addClass('blue'); 
$('body').append(element1); 

//Set some css for all elements with the blue class 
$('.blue').css('background-color', 'blue'); 

//Create 2nd element, it won't have the css applied because it wasn't around when the css was set 
var element2 = $('<div />').text('element2').addClass('blue'); 
$('body').append(element2);​ 

En el código anterior el segundo elemento no tiene el mismo estilo que el primero. Lo que me gustaría es poder establecer el css en un className para todos los elementos futuros.

JSFiddle

Answer 1

Se puede crear una nueva hoja de estilo y añadir esto a la cabeza:

$("<style type='text/css'> .blue{ background-color:blue;} </style>").appendTo("head"); 

Ver Demo: http://jsfiddle.net/YenN4/2/

Answer 2

Demostración: http://jsfiddle.net/T6KEW/

$('<style>').text('.blue { background: blue }').appendTo('head'); 

$('<div>').text('element1').addClass('blue').appendTo('body'); 
$('<div>').text('element2').addClass('blue').appendTo('body');​