Jquery search and apply css styles

Question

I want to modify the titlebar jquery plugin showcase, I added the <p class='title> to the description tag so that I can apply css styles to the title and to separate that portion to the actual description. Script:

var $a = $("<a />").attr("href", $container.find("a:first").attr("href")).html("<span>" + $container.find("a:first img").attr("alt") + "</span>");

var $titleBar = $("<div id='subBar' />").html($a);

HTML output:

<div id="subBar"><span><p class="title">Lorem</p>description here</span></div>

From the above structure how can I add css via jquery if <p class='title'> is encountered? I want to add css styles to class title, which is impossible to css because this is generated by javascript.

Answer 1

Remove the space between the 'p' and '.title' in your selector:

$container.find("p.title").css('color','red');

(if that's your question)

Update: Your jquery selector will still work fine even if the DOM element you are trying to access is generated by Javascript. You can test this in the javascript console (e.g. Firebug) of your browser. You just have to make sure your code is executed after the code that generates the title element.

However, do you really need to use Javascript here? If you just want to set paragraphs with class 'title' to red, just add some css:

p.title { color: red; }