Псевдокласс: first-letter



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

    Оригинал в моем блоге.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 105
    • +1
      Коротко и ясно! Честно избегал псевдоклассов в ие. Теперь один стоит взять на заметку!
      • 0
        Интересненько. Надо будет посмотреть поближе…
        • +2
          спасиба, недавно ломал голову, пытаясь понять почему мои стили не работали в ие... оказалось все так просто, что хочется кого-то ударить...
          • +1
            Вот за это ie я особенно люблю.
            • 0
              ...коробку с дистрибутивом Окон =D
            • 0
              Очень полезная заметка. Спасибо
              • +1
                сам давно и успешно использовал :first-letter, но вот про такие хитрости с пробелами... и ЭТО не исправили! позор Microsoft.
                • 0
                  В IE7 это исправили.
                  • 0
                    да. я уже посмотрел. но прошло что-то около шести лет, если мне не изменяет память...
                    • 0
                      Ну тут с вами только глупец поспорит ))
                  • 0
                    ну на самом деле если помните в IE6 даже в процессе исправлений возникали ещё более курьезные баги :) а так как немногие пользовались этим псевдоклассом, то и важность бага сошла на нет :)
                • 0
                  гениально! спасибо, должно заметно облегчить жизнь :)
                  • –8
                    +1
                  • 0
                    Класс!!! Я всегда был уверен что двойные бэкграунды в css невозможны.
                    Автор, спасибо тебе! Большое человеческое!

                    Пошел гуглить по псевдоклассам...
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • +6
                        Прям Каскадные Таблицы Сисек...
                        • НЛО прилетело и опубликовало эту надпись здесь
                          • 0
                            Вот оно! Отсутствие внимания со стороны противоположного пола
                      • 0
                        Спасибо! Обязательно возьму на заметку... Видимо я один, кто этот Псевдокласс использовал реально для стилизации первой буквы абзаца.. :)
                        • 0
                          спасибо!
                          • 0
                            Большое спасибо, действительно очень полезно. IE в своем репертуаре...
                            • 0
                              не знаю почему, но я всегда фигурную скобку отделяю от имён пробелом, причём неважно CSS это или Java или JavaScript

                              но полезность статьи это не уменьшает :)) - спасибо
                              • +1
                                Теперь придется еще и запятые от слов отделять. На всякий случай. :)
                              • +2
                                Не ожидал, что стиль, по сути предназначенный для буквицы, может быть использован таким вот образом, да еще и в IE 6 работает.

                                Очень полезная вещь. Респект автору!
                                • 0
                                  Спасибо за полезную информацию. Уже начинаем использовать :)
                                  • 0
                                    Спасибо за полезный пост.
                                    • 0
                                      Я и не додумался бы :)
                                      Спасибо.
                                      • 0
                                        Интересно.
                                        Еще бы :second-letter :)
                                        • +1
                                          Спасибо. Для списков и редких вставок, просто замечательное решение.
                                          • 0
                                            Но только не для нумерованых списков (ol), так как в них :first-letter распространяется и на порядковую цифру, и на первую букву.
                                          • 0
                                            Эти дикообразы, похоже, включили пробел в ключевое слово для парсера.
                                            Надо же было умудриться.
                                            • 0
                                              Спасибо, буду использовать =)
                                              • 0
                                                "Самый важный момент здесь в том, что нужно обязательно поставить пробел между самим псевдоклассом :first-letter и открывающей фигурной скобкой"
                                                Ие НЕ АДЕКВАТН =)
                                                • 0
                                                  рекомендуют здесь не все вокруг воспринимать адекватно (с)
                                                • 0
                                                  Коротко и по делу.
                                                  • 0
                                                    Единственный вопрос:
                                                    background: url(/images/star.jpg) left center no-repeat;

                                                    а почему center а не middle? Вроде же по горизонтали left, center, right, по вертикали - top, middle, bottom.
                                                    • 0
                                                      http://www.w3.org/TR/CSS21/colors.html
                                                      http://www.w3schools.com/css/pr_backgrou…

                                                      middle вобще в спецификации отсутствует.
                                                      • 0
                                                        Будем считать недокументированной функцией =)
                                                        Да и путаницы при кратком написании background:; так меньше.
                                                        • 0
                                                          Это все равно неправильно, потому что надо указывать в обратном порядке — background-position: top left, а не left top :) В данном случае браузер вам простит, а вот если будете указывать смещение в пикселях или процентах — увидите ошибку.

                                                          Я сам сегодня в одной из своих версток увидел, ага :))
                                                          • +1
                                                            Если по спекам, то вы правы, сначала top, а потом left. На деле же я никакой разницы не вижу, всегда пишу наоборот, везде работает.
                                                            • –1
                                                              Еще раз: если вы напишете не top left, а, скажем, 10px 20px, то сразу увидите ошибку. 10 пикселей будет отсчитываться _сверху_, а не слева.
                                                              • 0
                                                                Как раз наоборот. Сначала left, потом top
                                                                • 0
                                                                  Читайте мануалы :)
                                                                  • 0
                                                                    То есть то, что я проверил в браузере на всякий случай тоже неправильно? Все мои браузеры работают не так?
                                                                    • 0
                                                                      То есть вы хотите сказать, что проверили background-position: Npx Mpx, и N пикселей у вас в браузере отсчитывается СЛЕВА, а М пикселей отсчитывается СВЕРХУ? Я правильно понял?
                                                                      • 0
                                                                        Да, и в background: url(...) no-repeat 10px 100px; получается left top, и в background-position.
                                                                        • 0
                                                                          Хм, похоже ваша правда. Простите.
                                                                          • 0
                                                                            Ничего страшного. Я просто часто с этими параметрами работаю. Я не доверяю своей памяти, поэтом проверяю. Но доверяю своим глазам :)
                                                                            • 0
                                                                              В том-то и дело, что я тоже буквально позавчера перепутал эти параметры местами, и уже в который раз попытался запомнить правильный порядок :)
                                                                              И опять не получилось :))
                                                                              • 0
                                                                                А я когда последний раз перепутал, как раз и запомнил правильно :) Запоминается легко. Всё всегда начинается с ширины, потом высота. Что картинки, что координаты - XY. Поэтому первым идёт X - слева-направо, сверху-вниз :)
                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                              • 0
                                                                top и left просто ключевые слова, которые UA толкует однозначно, в каком бы порядке вы их ни написали. Но порядок в дому нужОн!
                                                        • 0
                                                          есть замечательные псевдоклассы :before и :after и замечательнейшая вещь content:

                                                          h1:before{
                                                          content: "*"
                                                          };

                                                          :-)
                                                          • 0
                                                            если что, в content вставлять картинки тоже :)
                                                            h1: before{
                                                            content: url('img.gif');
                                                            };
                                                            • 0
                                                              А в шестом осле это работает?
                                                              • –1
                                                                нет его под рукой проверить
                                                                • 0
                                                                  Насколько я помню, и близко не работает. Тож лень проверять :)
                                                                  • 0
                                                                    Абсолютно точно не работает.
                                                                    • 0
                                                                      Не работает во всех IE. Недавно буквально искал. Причем не нашел даже хаков.
                                                                      • 0
                                                                        expression, хороший хак
                                                                        • 0
                                                                          можно пример?
                                                                          • +2
                                                                            .content-before
                                                                            {
                                                                            zoom : expression(runtimeStyle.zoom = 1,
                                                                            insertAdjacentHTML('beforeEnd', '<div class="hr"></div>')
                                                                            }

                                                                            expression
                                                            • 0
                                                              Ай-да молодца! Спасибо огромное! Две фоновых картинки довольно часто хочется сделать и приходится извращаться.
                                                                • 0
                                                                  В вашем примере ie6 нервно курит в сторонке. А немощных и убогих обижать нехорошо... )
                                                                  • 0
                                                                    Ну да, верно. Хотя есть же условные комментарии и js. Или это совсем зло?
                                                                    • 0
                                                                      Нет, что вы, какое же это зло? ) Это благо, что они есть, просто я например, стараюсь js для верстки не использовать без особой нужды. У этого языка немного иное предназначение. А CC - всегда и везде. И всем рекомендую.
                                                                      • 0
                                                                        Кстати, я думаю, при особом желании можно подверстать три картинки на фон… Или в ie6 first-line тоже не пашет?
                                                                        • 0
                                                                          На сколько я помню - поддерживает, но могу ошибаться. Давно не пробовал просто.
                                                                          • 0
                                                                            Пашет, но совсем не так как хотелось бы. padding на него не повесить. По разному воспринимаются отступы у родителя.
                                                                            • 0
                                                                              padding на него вешается о спокойно, но считается по-другому немного. Я пока что по наитию / методом тыка умудряюсь добиться результата, надо будет уточнить несколько моментов.
                                                                              • 0
                                                                                Извини, не могу пока в блоге ответить - хостер под ddos-атакой.
                                                                                • 0
                                                                                  кроссбраузерно по пиксельно соединить два bg у меня получается только когда пишешь отдельные margin и padding для ослов. А я подобные манипуляции на дух не переношу.

                                                                                  >> Извини, не могу пока в блоге ответить - >> хостер под ddos-атакой.

                                                                                  Словами одного программера.
                                                                                  — Макс, прикинь мою прогу взломали! *радостно*

                                                                                  — Ну и чего ты радуешся?

                                                                                  — Ну прикинь, значит кому-то надо. Значит востребованно, не зря старался.

                                                                                  Так что поздравляю, ты звизда! ))
                                                                                  • 0
                                                                                    Я всегда подключаю еще два файла стилей для ie6/7, так что еще пару строк не страшно.
                                                                                    А по поводу атаки, это ж не на меня, а на хостера ;)
                                                                  • –1
                                                                    Из статьи полезно только начало.

                                                                    Дальше только обращается внимание на то, что если не соблюдать синтаксис CSS, то будут проблемы.

                                                                    Но все равно плюсодин)

                                                                    Я сам вот все хочу написать про IE и проиллюстрировать на примере готового проекта, но карма(
                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                      • 0
                                                                        Не будем опускаться до оскорблений, в чем я не прав? Я знаю еще несколько случаев, когда при неправильном написании правило работает в ФФ и Опере, а в ИЕ не работает.
                                                                        • 0
                                                                          Ну зачем же ВЫ так?
                                                                          После перед фигурой скобкой пробел нужен и это видно по любому из примеро на w3с, не нужно углубляться в спецификацию (http://www.w3.org/TR/CSS21/about.html#sh…).
                                                                          А насчет нытья - 4g3n7 ведь написал что хоxtn написать про IE и естесвенно во избежание нападков пояснил, почему еще не сделал этого.
                                                                    • 0
                                                                      Спасибо=) Если доведется использовать - буду уже знать, что делать. Хотя возможно и не заметил бы, т. к. всегда ставлю пробелы.
                                                                      • 0
                                                                        Отлично, незнал такого...респект автору :)
                                                                        • +1
                                                                          рекомендую всем самостоятельно проверить тезис о необходимости пробела:

                                                                          <style>
                                                                          h1:first-letter{text-decoration:underline;}
                                                                          </style>
                                                                          <h1>hello</h1>


                                                                          работает в IE6

                                                                          хотя я тоже поверил:-), решил лишь посмотреть прокатит ли \t
                                                                          • 0
                                                                            ( XP SP2 )
                                                                            • 0
                                                                              Задумался и тоже проверил. Работает начиная с 5.5. Проверил в портативных версиях 3.0, 4.01, 5.01, 5.5, 6.0. Затем проверил в 6.0 со всеми автоапдейтами.
                                                                              Может кто еще проверит или сможет прояснить чем ту подвох?
                                                                              • 0
                                                                                я на двух машинах проверил
                                                                                пришла пора спросить «Автор, что у тебя за браузер?»
                                                                              • 0
                                                                                может, потому, что всё в одну строку?
                                                                                и ещё, попробуй баг с запятой.
                                                                                • 0
                                                                                  одна строка — лишь для компактности
                                                                                  всё работает во всех позициях
                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                  • 0
                                                                                    Все очень просто!
                                                                                    Попробуй проставить доктайп - тогда не будет работать.
                                                                                  • 0
                                                                                    Срост! только как фоновые картинки будут между собой согласовываться, ну т.е. кто слоем выше будет, тот кто в цсс позже прописан? и еще а с еще одним псевдоклассом, например с :hover совмещать можно? было бы клево!
                                                                                    • –1
                                                                                      Семантически неправильное использование псевдокласса - no way.
                                                                                      • +2
                                                                                        стили у нас предназначены для стилей, там искать семантику - это уже перебор, имхо. семантика - это относительно информации. а стиль в себе информацию не должен нести.
                                                                                        • 0
                                                                                          Ну хорошо, если вы сами пишете CSS и вам нравится такой метод - пожалуйста. Но пожалейте других людей - такой код
                                                                                          • 0
                                                                                            А что такого в коде?
                                                                                            • +1
                                                                                              Всё ОК. Думаю, иногда этот способ лучше, чем классический - div в div.
                                                                                      • 0
                                                                                        таким образом разработчики IE учат нас писать аккуратно и по правилам :)
                                                                                        • 0
                                                                                          Да, все работает, но если мы напишем .class1 .class2 h3:first-letter {...} даже с пробелом ИЕ6 откажется работать
                                                                                          • 0
                                                                                            Такие конструкции IE6 не понимает даже без :first-letter. Или я вас не совсем верно понял. Вы имеете в виду двойной класс?
                                                                                            • 0
                                                                                              Нет, не двойной класс, а просто последовательность вложенных элементов. Например div .myclass h3
                                                                                              • 0
                                                                                                Это очень подозрительно. У меня такая последовательность сработала без проблем
                                                                                                • 0
                                                                                                  хм, буду пробовать. Просто h3:first-letter {...} (без иерархии) работает без проблем, а если задавать последовательность, то не работает
                                                                                                  • 0
                                                                                                    Проверьте иерархию и наследование стилей
                                                                                          • 0
                                                                                            спасибо за статью, помоему реально первый полезный для меня пост за несколько месяцев… уж очень много стало появляться на хабре всяких перепечаток и банальных методов, которыми мало кого удивишь =)

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