Уже довольно давно использую псевдокласс :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 нужен для того, чтобы фоновое изображение было больше по высоте чем шрифт и чтобы не быть под самим текстом.
Оригинал в моем блоге.