apply CSS style to particular elements dynamically

Question

I have a div with paragraphs inside:

  
...
  
...

I want dynamically to apply

Answer 1

Changing the css dynamically would be as simple as changing the top level class name for example

  
...
  
...

Test

​

.class1 {
 background-color:#F00;
}

.class1 p {
    color:#00F;
}

.class2 {
    background-color:#00F;
}

.class2 p {
 color:#F00;
}​

then the jquery would be

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

Everything below the class will change to its new style :)

fiddle