CODEWITHSUNDEEP
jqueryhtmlcssdomelement
Romulus3799
Romulus3799

Reputation: 1897

Refreshing element styles in jQuery

In my JavaScript, I dynamically append elements to a div like this:

$('.class-name').after('<p class="foo">Hello World!</p>')

In my CSS, I have something like this:

p .foo {
    color: green;
}

When I test it, the new paragraph element appears, but the text stays black. Is this a case of the document not reading the class of the "p" element? Or does the class "foo" not apply to generated elements?

Upvotes: 0

Views: 51

Answers (3)

Amir H. Bagheri
Amir H. Bagheri

Reputation: 1416

This should be your style:

p.foo {
   color: green;
}

Remove that blank space between "p" and "foo".

Upvotes: 2

Travis J
Travis J

Reputation: 82337

Your rule definition is slightly off. What you have is "elements with the class foo that are inside of a p element".

What you meant was elements that are p elements and have the class foo, which is

p.foo { color: green; }

Upvotes: 1

Jasper
Jasper

Reputation: 534

Try without the space between the paragraph tag and the class.

p.foo {
    color: green;
}

It's the paragraph that has the class, there is no nested element with a class 'foo'.

Upvotes: 1

Related Questions