Как написать первую букву абзаца с jquery, но не символы?

Question

В моем worpdress блоге я использую следующий код JQuery, чтобы обернуть первую букву в тег диапазона, так что я могу стиль его с большим внешним видом:

$(".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); }); 

Это работает нормально, но когда я вставить изображение делает не отображается, потому что первый символ кода вставки изображения «<« i'ts завернуты в теги span, поэтому, как я могу применить это только к буквам от a до z?

Answer 1

Я думаю, что вы ищете ':first-letter CSS псевдо-элемента

Если добавить CSS вот так:

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

Или что-то в этом роде, который должен покрыть ее.

(о, да, с :first-child CSS псевдо-элемента)

Answer 2

Вот пример, который бы стилизовать первую букву ряда пунктов с большим внешним видом и плавать он оставил, похожий на стиль видели в журналы.

p:first-child:first-letter { 
    font-size: 5em; 
    float: left; 
    padding: 0 10px 10px 0; 
    text-transform: uppercase; 
} 

Демо: http://jsfiddle.net/jrthib/du4qv/1/

Ссылка: http://css-tricks.com/almanac/selectors/f/first-letter/