::first-letter

    0
    151

    Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.

    Псевдоэлемент ::first-letter не применяется для элементов типа inline; т.е. к элементам, которые имеют свойство display: inline. Работает только с элементами у которых значение display объявлено как: block, inline-block, table-cell, table-caption, или list-item.

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

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

    Пример

    Свойства, которые можно стилизовать с помощью ::first-letter

    Только следующие свойства могут быть использованы в ::first-letter :

    • Шрифт: font, font-style, font-variant, font-weight, font-size, line-height, и font-family.
    • text-decoration, text-transform, letter-spacing, word-spacing (при необходимости), float, vertical-align (только если float : none), и color.
    • Внешний отступ: margin, margin-top, margin-right, margin-bottom, и margin-left.
    • Внутренний отступ: padding, padding-top, padding-right, padding-bottom, и padding-left
    • Рамки: border, border-width, border-style, border-color, и все не универсальные виды записей этих свойств
    • Фон: background, background-color, background-image, background-position, background-repeat, background-size, и background-attachment.

    Тонкости & Особенности

    Различие между (:) и (::)

    Возможно, вы встретите или уже встречали два варианта написания псевдоэлементов с двойным или одинарным двоеточием.

    В CSS1 и CSS2 псевдоэлементы задавались используя одинарное двоеточие (:), как и псевдо-классы (например, :focus или :hover). В CSS3 было введено двойное двоеточие (::) для того, чтобы разделять псевдоэлементы от псевдо-классов.

    Все браузеры, которые поддерживают обозначение двойным двоеточием, также поддерживают и обозначение одинарным двоеточием. Поэтому, если вы не собираетесь поддерживать кроссбраузерность в Internet Explorer > 8, можете не беспокоиться.

    Поддержка в браузерах

    ПОДЕЛИТЬСЯ
    Предыдущая статья::first-line
    Следующая статьяbackground-attachment
    Постоянный автор на exabyte.ws. Специализируюсь на Wordpress, Javascript & jQ, REST API. Любые вопросы связанные с Web разработкой вы можете задать лично или в группе вконтакте.

    ОСТАВЬТЕ ОТВЕТ

    Пожалуйста оставьте комментарий!
    Введите ваше имя