Используем псевдокласс :first-letter для назначения двух изображений

[maddogrts]

Уже довольно давно использую псевдокласс :first-letter для назначения двух фоновых изображений для одного элемента. Самое интересное что :first-letter, один из немногих псевдоклассов, которые работают в 6-ом Интернет Эксплорере. Но есть одна маленькая хитрость, которую нужно знать. К делу. Как сказано выше, HTML элемент у нас один. Пусть это будет заголовок первого уровня.

<h1>About us</h1>

Задаем ему базовые стили, фоновый цвет и фоновое изображение (звездочки справа):

h1{
border-top: 1px solid #094eaa;
border-bottom: 1px solid #094eaa;
background: #002261 url(/images/stars.jpg) right center no-repeat;
}

Все как обычно. Но теперь нам надо добавить звездочку слева. Делается это так:

h1:first-letter {
background: url(/images/star.jpg) left center no-repeat;
padding: 7px 0 6px 30px;
}

Самый важный момент здесь в том, что нужно обязательно поставить пробел между самим псевдоклассом :first-letter и открывающей фигурной скобкой, иначе псевдокласс не отработает в IE6.

h1:first-letter{ /*Не сработает*/
property: value;
}

h1:first-letter { /*Сработает, так как есть пробел перед фигурной скобкой*/
property: value;
}

Есть еще один момент. Если нужно указать одни и те же стили для нескольких элементов и один из них псевдокласс

:first-letter, то нужно обязательно вставить пробел при перечислении элементов, перед запятой. То есть: 
h1:first-letter, .someclass { /*Не сработает*/
property: value;
}

h1:first-letter , .someclass { /*Сработает, так как есть пробел перед запятой*/
property: value;
}

Вот в принципе и все. padding нужен для того, чтобы фоновое изображение было больше по высоте чем шрифт и чтобы не быть под самим текстом. Оригинал в моем блоге.

Взято с http://habrahabr.ru/blog/css/32786.html

[Ekstazi]

Спасибо огромное, а я то думал, почему не всегда срабатывает.

[rmaksim]

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

[klierik]

поучительно. спасибо