Let say I have my HTML code look like this:

<p class="p">Paragraph</p>
<p class="p p2">Paragraph 2</p>
<p class="p p3">Paragraph 3</p>

If I use: $('.p').css('color','red'), this will apply red color to all paragraphs.

How can I apply the style to paragraph that only has class p which is first paragraph in this case?

Let say I have my HTML code look like this:

<p class="p">Paragraph</p>
<p class="p p2">Paragraph 2</p>
<p class="p p3">Paragraph 3</p>

If I use: $('.p').css('color','red'), this will apply red color to all paragraphs.

How can I apply the style to paragraph that only has class p which is first paragraph in this case?

• javascript
• jquery
• css
• jquery-selectors
• paragraph

• 1 possible duplicate of jQuery: Is it possible to select elements with only one class from among elements with, potentially, up to 3 classes? – user1106925 Commented Apr 28, 2013 at 15:44
• Why are you counting your ps? – melhosseiny Commented Apr 28, 2013 at 23:15

4 Answers 4

You can use attribute selector:

$('p[class="p"]').css('color','red');

http://jsfiddle/umxGh/

Or:

$('p').filter(function(){
   return this.className === 'p';
}).css('color', 'red');

You can use:

$('.p[class="p"]').css('color', 'red');

or:

$("p[class='p']").css('color', 'red');

Fiddle

Use an attribute selector:

$('p[class="p"]').css('color','red')

Try this:

$('[class=p]').css('color','red');