Css Rules not working on dynamic content

Hi there,

I have an application which uses JQuery to apply new CSS classes to certain elements.

What I want to do is have a parent container which starts off with “some_class” and then toggle that class on a click event so that all of the children inside obey a new CSS rule.

so that .someclass .element changes to .newclass .element

I have outlined both the old rule and the new rule in my stylesheet in the head of the page.

The problem I have is that when I use jQuery to apply the class the children of the new class aren’t obeying the CSS rule I have outlined for them.

The event is firing fine and I can see the parent container class change in firebug.

Surely all of the CSS rules are interpreted from the browser as the DOM loads, why would the CSS not change elements that it already has rules for?

Are you able to post a link? It would be interesting to see what’s happening here.

[solved]

Hi Ralph,

Thanks for your reply, I have posted this in the wrong forum, I should have used the jQuery forum. I don’t know if you are into jQuery but if you are you will be familiar with the addClass and toggleClass functions.

I haven’t confirmed it yet but I’m pretty sure that I can’t use those functions to change the class of a parent and expect all of the children to change with it. The only element that will change is the element which you select with jQuery as in:


$(".parent").addClass("new_class"); // changes only parent element

I will probably need to add that class to all of the children by first selecting them with jQuery as below:


$(".parent").children().addClass("new_class"); // to select all children

I can see that you are an administrator, maybe you can move this post to the js forum.

thanks anyway

Done. :slight_smile:

I’m not very experienced with jQuery, but I would be surprised if adding a class to a parent element didn’t affect the children too … as long as your styles are set up for inheritance, such as

.new_class p {color: red;}

But I’d be interested to know either way. :slight_smile:

Hey there, the answer is in this thread, its like I said, you need to add the class to the children:

http://stackoverflow.com/questions/11820993/jquery-uis-addclass-animations-not-animating-changes-on-child-elements

thanks Ralph

Hey there,

for anyone reading my post please disregard the above the real answer was that I had made a classic CSS mistake:

I had started my some_class name with a number as in “4Style” , this is always bad practice and numbers should be avoided in this context and if used at all they must be escaped like as in .\35

Apologies, useful blunder to remeber though!