Как найти и окружить span первую букву в тексте?

[Orbit]

По дизайну первая буква в тексте страницы должна иметь другой стиль, чем основной текст (большая и красивая).
Естественно, хочется сделать чтобы это делалось автоматом, а не юзеру пришлось бы объяснять, что нужно первую букву всегда писать:

<span class="big">А</span>пельсин

Но текст из визуального редактора, т.е. там первым не обязательно будет буква контента, а могут теги какие-то идти.
Пришло пока в голову:
1. очистить исходный хтмл текст от хтмл тегов
2. взять первый символ от полученного и окружить его нужным span
3. заменить в исходном хтмл первое вхождение найденного символа на нужную конструкцию, полученную в п.2

Но по третьему пункту не сходится, т.к. символ может встречаться внутри хтмл тегов, которые идут еще до самого текста.

Подскажите, пожалуйста, как можно сделать замену?

 

[Miraage]

это ксс, а не пхп

иди читай про псевдокласс :first-letter

 

[Orbit]

большое спасибо, это как то упустил, попробую так сделать, но это не совсем все же то, т.к. это не совсем универсально.
Хотелось бы сделать так, чтобы независимо от того в каких тегах находится текст, бралась бы первая буква (т.е. это может быть p а может и без p), тогда уже без замены не обойтись наверно.
А если брать именно первую букву первого абзаца то решение что-то типа

h1+p:first-letter

перестанут работать, если, скажем в каких то текстах что-то будет между h1 и p

first-letter, конечно лучше решение, чем span вставлять.

 

[rex1963]

.sp{
color: #000000;
font-family: Verdana;
font-size: 10pt;
} 

p.sp:first-letter 
{
	color: #800000;
	font-size:xx-large;
    font-weight: bold;
	font-family:Verdana;
}

<p class="sp">Апельсин</p>

Текст делится параграфами, вот первый и делай с красивой буквой

 

[Orbit]

это не то, опять же придется заставлять пользователя (не знающего хтмл) прописывать класс в p

 

[Murdok]

это не то, опять же придется заставлять пользователя (не знающего хтмл) прописывать класс в p

сделайте для всех тегов p

p:first-letter  {     
     color: #800000;
     font-size:xx-large;
     font-weight: bold;
     font-family:Verdana; 
} 

<p class="sp">Апельсин</p>

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[Orbit]

мне не нужно во всех, мне нужно в первом, причем не обязательно p
(описал задачу в первом посте)

 

[zzallexx]

<style>.content:first-letter  {     
     color: #800000;
     font-size:xx-large;
     font-weight: bold;
     font-family:Verdana; 
} </style>
<div class="content">
   <div>Любой текст в любых тегах</div>
     <p>Еще любой текст в параграфе</p>
   </div>

а так?
у тебя же наверняка основной текст страницы заключен в див

 

[Nei]

Orbit, приведи пример страницы или ссылку кинь. Проще будет помочь.

 

[Orbit]

<style>.content:first-letter  {     
     color: #800000;
     font-size:xx-large;
     font-weight: bold;
     font-family:Verdana; 
} </style>
<div class="content">
   <div>Любой текст в любых тегах</div>
     <p>Еще любой текст в параграфе</p>
   </div>

а так?
у тебя же наверняка основной текст страницы заключен в див

спасибо, но что то у меня не работает на "Любой текст в любых тегах" если так сделать.