САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Псевдо-элементы



Что такое псевдо-элементы?

Псевдо-элемент используется для оформления указанной части элемента.

Например, он может быть использовано для:

  • Стиля первой буквы или линии элемента
  • Вставки содержимого до или после элемента

Синтаксис

Синтаксис псевдо-элементов:

селектор::псевдо-элемент {
   свойство:значение;
}

Обратите внимание на двойное двоеточие - ::first-line в сравнении с :first-line

Двойное двоеточие заменило одиночное-двоеточие для псевдо-элементов в CSS3. Это была попытка от W3C, чтобы различать псевдо-классы и псевдо-элименты.

В одиночное-двоеточие синтаксис используется для псевдо-классов и псевдо-элементов CSS2 и CSS1.

Для обеспечения обратной совместимости, в одиночном-двоеточие синтаксис приемлем для спецификации CSS2 и CSS1 псевдо-элементов.


Псевдо-элемент - ::first-line

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

Следующий пример форматирует первую строку текста во всех элементах <p>:

Пример

p::first-line {
   color: #ff0000;
   font-variant: small-caps;
}
Редактор кода »

Примечание: Псевдо-элемент ::first-line можно применять только для элементов уровня блока.

Следующие свойства применяются к псевдо-элементу ::first-line:

  • Свойство font
  • Свойство color
  • Свойство background
  • Свойство word-spacing
  • Свойство letter-spacing
  • Свойство text-decoration
  • Свойство vertical-align
  • Свойство text-transform
  • Свойство line-height
  • Свойство clear

Псевдо-элемент - ::first-line

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

Следующий пример форматирует первую букву текста для всех элементов <p>

Пример

p::first-letter {
   color: #ff0000;
   font-size: xx-large;
}
Редактор кода »

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

Следующие свойства применяются к псевдо-элемент ::first-line:

  • Свойство font
  • Свойство color
  • Свойство background
  • Свойство margin
  • Свойство padding
  • Свойство border
  • Свойство text-decoration
  • Свойство vertical-align (только если float содержит none)
  • Свойство text-transform
  • Свойство line-height
  • Свойство float
  • Свойство clear

Псевдо-элементы и классы

Псевдо-элементы может быть в сочетании с классами:

Пример

p.intro::first-letter {
   color: #ff0000;
   font-size:200%;
}
Редактор кода »

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


Псевдо-элементов несколько

Может быть объединено несколько псевдо-элементов.

В следующем примере первая буква параграфа будет красным и размер шрифта xx-large. Остальные буквы в первой строке будет синими и small-caps. Остальные параграфы будут в размер шрифта и цвет по умолчанию:

Пример

p::first-letter {
   color: #ff0000;
   font-size: xx-large;
}

p::first-line {
   color: #0000ff;
   font-variant: small-caps;
}
Редактор кода »

Псевдо-элемент - ::before

Псевдо-элемент ::before может использоваться, чтобы вставить содержимое до содержимого элемента.

Следующий пример вставляет изображение, перед содержания каждого элемента <h1>:

Пример

h1::before {
   content: url(smiley.gif);
}
Редактор кода »

Псевдо-элемент - ::after

Псевдо-элемент ::after может использоваться, чтобы вставить содержимое после содержимого элемента.

Следующий пример вставляет изображение после содержания каждого элемента <h1>:

Пример

h1::after {
   content: url(smiley.gif);
}
Редактор кода »

Псевдо-элемент - ::selection

Псевдо-элемент ::selection соответствует части элемента, выбранного пользователем.

Указанные ниже свойства CSS могут применяться к ::selection: color, background, cursor, и outline.

Следующий пример делает выделенный текст красным цветом на желтом фоне:

Пример

::selection {
   color: red;
   background: yellow;
}
Редактор кода »

Проверьте себя с помощью упражнений!


Все CSS псевдо-элементы

Селектор Пример Описание примера
::after p::after Вставить что-то после содержания каждого элемента <p>
::before p::before Вставить что-то перед содержанием каждого элемента <p>
::first-letter p::first-letter Выбирает первую букву каждого элемента <p>
::first-line p::first-line Выбирает первую строку каждого элемента <p>
::selection p::selection Выбирает часть элемента, выбранного пользователем

Все CSS псевдо-классы

Селектор Пример Описание примера
:active a:active Выбирает активную ссылку
:checked input:checked Выбирает каждый элемент проверить в <input>
:disabled input:disabled Выбирает каждый элемент отключен в <input>
:empty p:empty Выбирает каждый элемент <p>, который не имеет детей
:enabled input:enabled Выбирает каждый элемент включен в <input>
:first-child p:first-child Выбирает каждый элемент <p> что является первым ребенком своего родителя
:first-of-type p:first-of-type Выбирает каждый элемент <p>, который является первым элементом <p> своего родителя
:focus input:focus Выбирает элемент <input>, который имеет фокус
:hover a:hover Выбирает ссылку при наведение курсором
:in-range input:in-range Выбирает элементы <input> в пределах указанного диапазона значений
:invalid input:invalid Выбирает все элементы <input> с недопустимым значением
:lang(language) p:lang(it) Выбирает каждый элемент <p> со значением атрибута lang, начиная с "it"
:last-child p:last-child Выбирает каждый элемент <p> что является последним ребенком своего родителя
:last-child :last-of-type Выбирает каждый элемент <p>, который является последним элементом <p> своего родителя
:link a:link Выбирает все непосещенные ссылки
:not(selector) :not(p) Выбирает каждый элемент которого нет в элементе <p>
:nth-child(n) p:nth-child(2) Выбирает каждый элемент <p>, что это второй ребенок своего родителя
:nth-last-child(n) p:nth-last-child(2) Выбирает каждый элемент <p>, который является вторым ребенком своего родителя, считая от последнего ребенка
:nth-last-of-type(n) p:nth-last-of-type(2) Выбирает каждый элемент <p> вторичного элемента <p> своего родителя, считая от последнего ребенка
:nth-of-type(n) p:nth-of-type(2) Выбирает каждый элемент <p> вторичного элемента <p> своего родителя
:only-of-type p:only-of-type Выбирает каждый элемент <p> , который является единственным элементом <p> своего родителя
:only-child p:only-child Выбирает каждый элемент <p>, который является единственным ребенком своего родителя
:optional input:optional Выбирает элемент <input> без атрибута "required"
:out-of-range input:out-of-range Выбирает элемент <input> со значением, выходящим за пределы указанного диапазона
:read-only input:read-only Выбирает элемент <input> с определенным атрибутом "readonly"
:read-write input:read-write Выбирает элемент <input> без атрибута "readonly"
:required input:required Выбирает элемент <input> с определённым атрибутом "required"
:root root Выбирает корневой элемент документа
:target #news:target Выбирает текущий активный #news элемент (нажали на URL-адрес, содержащий имя якоря)
:valid input:valid Выбирает все элементы <input> с допустимым значением
:visited a:visited Выбирает все посещенные ссылки