Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Псевдоэлементы CSS

Дата:10.02.15 в 13:57
Раздел: 

Псевдоэлементы CSS это своего рода условные составные части уже существующих html тегов.

С точки зрения синтаксиса они ни чем не отличаются от псевдоклассов. Их схожесть также проявляется в некоторой «фантомности» того, к чему они применяются, только в отличие от псевдоклассов псевдоэлементы реагируют не на изменение состояния определенных тегов на странице, а создают своего рода фантомные составляющие части уже существующих тегов.

Как пользоваться селекторами псевдоэлементов CSS?

Задачей селектора псеводоэлемента CSS является выбор из структуры документа составных частей элементов подпадающих под характеристики селектора и спецификацию псевдоэлемента.

Задается он при помощи двуеточия после которого следует название используемого псевдоэлемента.

В качестве примера давайте выведем первую букву в абзацах красным цветом большего размера:

p:first-letter {
   font-size: 150%;
   color: red;
} 

Нюансом при использовании псевдоэлементов CSS является то, что они должны идти в конце селектора. Тоесть такая запись работать не будет:

p:first-line span{
   color: red;
}

Какие бывают псевдоэлементы?

  • :first-line – применяется к первой строке текста находящейся внутри тега. Длину строки мы обычно зараннее узнать не можем, поскольку она зависит от шрифта, его отображения в разных браузерах, размера окна (при резиновой верстке) и прочих нюансов. Позволяет изменять оформление только у текста и его фона (размер, цвет шрифта, фона и тд).
  •  ::first-line – то же самое, что и :first-line, только для CSS 3.
  • :first-letter – похож на предыдущий, отличается только тем, что стили применятся только к первому символу в тексте элемента. Работает, словно первая буква взята в отдельный тег.
  • ::first-letter – то же самое, что и :first-letter, только для CSS 3.
  • :before – добавляет содержимое перед элементом к которому применяется. Используется вместе со свойством content. К примеру:
    .tag:before {    
       content: open-quote; /*открытая кавычка перед тегом*/
    }

    К нюансам использования относится: этот псевдоэлемент наследует оформление тега, к которому добавляется; поддерживает только none, block, inline, list-item значения свойства display для блочных элементов и none, inline значения для строчных элементов.
  • :after – аналогичен :before, только при его использовании содержимое добавиться после элемента к которому он будет применен.
  • ::before – то же самое, что и :before, только для CSS 3.
  • ::after – то же самое, что и :after, только для CSS 3.
  • ::selection – позволяет изменять оформление выделенного пользователем текста на сайте. Может изменять только цвет выделенного текста и цвет фона при выделении. Не работает в фаерфоксе.
  • ::-moz-selection  - тоже самое, что и ::selection, только для фаерфокса.
  • ::-ms-value – применяется только к тегам input, select. Позволяет изменять их оформление. Работает только для IE.
  • ::-ms-reveal – применяется для оформления кнопки для просмотра пароля (при наличии атрибута type="password" у тега input у формы появится кнопка, которая при ее нажатии и удержании открывает цифры, которе в обычном состоянии заменяются точками). Работает только в IE.Кнопка просмотра пароля
  • ::-ms-fill применяется только к элементу progress, позволяя изменять его оформление. Работает только в IE.
  • ::-ms-expand позволяет стилизовать кнопку открытия списка у тега select у IE.Кнопка открытия списка
  • ::-ms-clear – позволяет менять оформление кнопки очистки текстового поля в IE.кнопка очистки текстового поля
  • ::-ms-check – дает возможность стилизовать флажки (checkbox) и переключатели (radio) у форм в IE.
  • ::-ms-browse – применяется к тегу input с атрибутом type="file". Работает только в IE. Дает возможность задать оформление кнопки «обзор».

Подводя итоги

Псевдоэлементы css используются для упрощения оформления html документа в некоторых частных случаях. Они дают нам возможность не добавлять лишние теги, а прописать оформление к уже существующим тегам в CSS.

Чаще всего на практике используются :after и :before (к примеру для добавления маркеров спискам, более сложного оформления выпадающего меню), чуть реже :first-letter и :first-line. Области же применения остальных псевдоэлементов достаточно экзотичны и крайне редко встречаются в практике.

Да и не стоит забывать, что только эти 4 селектора поддерживаются всеми браузерами достаточно давно. Остальные псевдоэлементы начали входить в обиход с появлением стандарта CSS3, что означает отсутствие их поддержки у старых браузеров.

Оценок: 1 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)