Pseudo-selectors acting strangely with jQuery

Question

I am working on an experimental site with a fellow student of mine and I am running into an issue with jQuery and CSS selectors. Let me give you a recap of the issues I am seeing. In my CSS I am chaining pseudo-selectors to do some simple nth-based styling like so:

HTML:

<ul class="formatted-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

I am targeting things with nths like so:

CSS:

.formatted-list li:nth-child(odd) { ... }
.formatted-list li:first-child:first-letter { ... }

The first selector is working correctly in both CSS and jQuery. However, when I try to target the following code:

$('.formatted-list li:first-child:first-letter')

I am not returning an element. Am I doing something wrong here?

Answer 1

Since you are trying to target an object in jQuery you can't get the first letter that way. You are working with an object, not a string.

The first example is targeting all odd objects, but the second one is targeting the object string (aka the first letter).

So you should split your code a little, first to take the object text and then to take it's first letter.

Answer 2

The selector is not in the jQuery api docs .

I don't see another way to do this then this:

$('.formatted-list li:first-child').text().substr(0,1);

Fiddle

Answer 3

to capitalize the first letter of every list item, do this:

$('.formatted-list li').each(function(idx) {
    var txt = $(this).text();
    $(this).text(txt.charAt(0).toUpperCase() + txt.slice(1));
});

here's another pure css solution to capitalize the first letter of each word in the list item:

.formatted-list li {
    text-transform: capitalize;
}