Войти
Регистрация

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

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

Здравствуйте, дорогие друзья!

В этой статье поговорим не только о псевдоэлементах, но и о псевдоклассах и узнаем, чем они отличаются.

Все стили, которые мы пишем в CSS, используются для тех элементов HTML-разметки, которые мы можем увидеть, но есть элементы, которым также нужно задавать стили, хотя их нет в разметке.

Например, с помощью тегов нельзя изменить цвет элемента при наведении мыши, цвет посещенной ссылки или добавить перед или после элемента еще какой-нибудь не вписывая его в разметку.

В чем же отличия псевдоэлементов и псевдоклассов?

Псевдоэлементы влияют на существующие элементы HTML-верстки, псевдоклассы на те, которых нет в разметке. Иными словами, псевдоэлементы создают новые области для элементов, а псевдоклассы меняют состояние текущих объектов при определенных условиях.

1. Псевдоклассы

Например, псевдокласс hover:

div:hover {
   background: red;
}

В этом примере с помощью этого псевдокласса мы задаем красный фон блока при наведении на него курсором мыши.

Псевдокласс указывается после селектора элемента, например как у нас после <div> с двоеточием. Также псевдоклассы можно указывать и после селектора класса или id, например:

#block:hover {
   background: red;
}

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

  • hover - задает стиль при наведении на элемент.
  • active - задает стиль активной ссылки, при нажатии на нее, но также можно применять и к другим элементам (кнопки, блоки и т.д.).
  • focus - задает стиль при фокусе на элементе, чаще при фокусе текстовых полей, когда в них устанавливают курсор.
  • link - стиль для непосещенной ссылки.
  • checked - задает стиль для чекбоксов и радиокнопок, когда они в отмеченном состоянии.
  • not(s) - задает стиль для всех элементов, которые не содержат селектор, указанный в скобках.

С последним покажу пример. Например, у Вас есть форма и там текстовые поля (input) с разными параметрами атрибута type, например, некоторые type="email", какие-то type="password", остальные type="text". Вы хотите задать стиль всем полям, кроме тех, что type="text"

input:not(type["text"]) {
   border: 2px solid red;
}

Задали рамку красного цвета толщиной в 2 пикселя всем полям, кроме тех, что с type="text"

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

Замечали иногда в интернет-магазинах у товаров ярлычки "хит", "новинка", "скидка" или у некоторых пунктов меню значки в самом начале?

Так вот это все дело рук псевдоэлементов.

Основные и наиболее частые псевдоэлементы:

  • first-letter - задает стиль первого символа в тексте внутри тега.
  • first-line - задает стиль первой строки текста внутри тега.
  • before - создает элемент с содержимым до элемента, к которому применяется.
  • after - создает элемент с содержимым после элемента, к которому применяется.

Рассмотрим последние два - after и before

Вдвоем они используются одинаково, только создают элементы в конце или начале элемента, к которому применяются.

Например, есть у нас маркированный список и мы хотим вначале элемента списка вместо маркера установить значок. Можно, конечно, это сделать с помощью фона маркеров, как этому я учил в статье по спискам в CSS, но эта статья не о них.

Создадим простой список:

<ul>
  <li>Первый элемент списка</li>
  <li>Второй элемент списка</li>
</ul>

Уберем маркеры и установим значки, вместо них с помощью псевдоэлемента before:

ul li::before {
   content: "\2663";
   list-style: none;
}

В итоге мы получим:

  • Первый элемент списка
  • Второй элемент списка

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

Также можно созданному элементу с помощью псевдоэлемента before применять любые стили, как для обычного элемента: задать фон, рамку, позиционировать его. В этом случае в свойстве content ничего не указывайте, оставьте его пустым, но оставьте, иначе без него псевдоэлемент не будет работать.

Например, тому же элементу списка просто зададим красный квадрат, вместо маркера:

ul li::before {
   background: red;
   content: "";
   display: inline-block;
   height: 10px;
   list-style: none;
   width: 10px;
}

В итоге мы получим:

  • Первый элемент списка
  • Второй элемент списка

Здесь важно задать псевдоэлементу свойство display inline-block или block, а также высоту и ширину, чтобы его было видно.

Точно также работает и псевдоэлемент after, который устанавливает элемент в конец.

Надеюсь эта статья пополнила Ваш уже не легкий багаж знаний основ CSS новым и интересным правилом CSS. Я же с Вами не прощаюсь, впереди еще статьи.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?