How to select elements with exact one class name?

Question

so I have,

<ul>

<li class="foo">
abc
</li>

<li class="foo bar">
def
</li>

</ul>

If I do $('.foo').css('font-size','x-large');

this will change both li elements with the large font. How could I select the class with "foo" only but not "bar"?

Thanks!

Answer 1

This should work:

$('.foo:first').css('font-size','x-large');

Answer 2

You can use the following attribute selector, I suppose:

$('li[class=foo]');

Here's a JSFiddle to play with. )