Search code examples
jquerycapitalize

How to capitalize the first letter of a paragraph with jquery but no symbols?

In my worpdress blog i am using the following jquery code to wrap the first letter in a span tag so i can style it with a bigger appearance:

$(".single .the_content p:first")
  .each(function () { var el = $(this), replace(/\b[a-z]/g, text = el.html(), first = text.slice(0, 1), rest = text.slice(1); el.html("<span class='capital'>" + first + "</span>" + rest); });

It's works ok but, when i insert an image does not display because the first symbol of the image insert code "<" i'ts wrapped in span tags, so, how can i apply this only to letters from a to z ?

Solution

  • I think you're looking for the ':first-letter css pseudo-element

    If you add css like so:

    .single .the_content p:first-letter {
    font-size: 2em;
    color: #80ffff;
}

    Or something of the sort, that should cover it.

    ( oh, right, with the :first-child css pseudo-element )