aplicar el estilo CSS a elementos particulares dinámicamente

Tengo un div con párrafos dentro:

...

...

Quiero aplicar dinámicamente un cierto estilo a los párrafos dentro de esta div. ¿Es posible hacerlo sin manejar cada elemento de párrafo, pero simplemente adjuntar de alguna manera el estilo al elemento div y todos los párrafos internos se verían afectados?

Tal vez con jQuery.

Me suena como un cambio dynamic de la hoja de estilo, ¿es posible?


La recomendación correcta en los comentarios de la respuesta.

Gracias.

Sin utilizar clases:

 /* using CSS */ div p { color: #ff0000; } // using jQuery $("div p").css({ color : "#ff0000" }); 

Con clases para elementos

:

  

...

...

/* using CSS */ div p.mypar { color: #ff0000; } // using jQuery $("div p.mypar").css({ color : "#ff0000" });

Con clases para el elemento

:

  

...

...

/* using CSS */ div.mydiv p { color: #ff0000; } // using jQuery $("div.mydiv p").css({ color : "#ff0000" });

Con CSS puedes definir un selector hijo .

A partir de eso, puede agregar / eliminar dinámicamente una clase de estilo a su div y el estilo se aplicará a los hijos que especifique en ese selector.

Supongamos que desea aplicar esto a un div específico, no a ninguno / a cada uno. Así que dale un identificador al div objective:

 

...

...

Añadiendo un estilo dynamic con javascript simple:

 document.getElementById('foo').style.className='dynamic_style' 

El CSS (usando la identificación y la clase combinadas en un selector secundario):

 div#foo.dynamic_style > p { /* your style definition*/ } 

Usando CSS:

 div p {your style goes here} 

jquery

 $('div p').css('property', 'value'); 

Puedes aplicar el CSS dinámicamente para este ejemplo tuyo de esta manera:

 function applyCSS() { $("div > p").css({ "background": "#fff", "color": "#000" }); } 

O, cuando quieras aplicar esto cuando se carga la página:

 $(document).ready(function(){ applyCSS(); }); 

Cambiar el css dinámicamente sería tan simple como cambiar el nombre de la clase de nivel superior, por ejemplo

 

...

...

Test

En

 .class1 { background-color:#F00; } .class1 p { color:#00F; } .class2 { background-color:#00F; } .class2 p { color:#F00; }​ 

entonces el jquery sería

 $(document).ready(function() { $('#test').click(function() { $('#toggleme').toggleClass('class1'); $('#toggleme').toggleClass('class2'); }); });​ 

Todo debajo de la clase cambiará a su nuevo estilo 🙂

violín