• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Псевдоклассы и псевдоэлементы в CSS (Разница между псевдоклассом и псевдоэлементом в CSS)
Псевдоклассы и псевдоэлементы в CSS
Kosten
Дата: Пятница, 2019-12-06, 21:26 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26655
Награды: 61


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

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

Классы CSS также представляют различные состояния элемента.

Рассмотрим элемент в отключенном состоянии. Дерево HTML не содержит информации, находится ли элемент в отключенном состоянии или нет - браузер сохраняет эту информацию в другом месте. Чтобы выбрать элемент в этом состоянии, используется - :disabled как псевдокласс.

Учтите, что нам нужно выбрать первого дочернего элемента, ГДЕ Первый дочерний элемент присутствует в дереве DOM, однако выбор этого невозможен с помощью простых селекторов CSS. Для этого есть селектор псевдокласса - :first-child.

Некоторые из определенных селекторов псевдоклассов:

- Динамические псевдоклассы, которые выбирают элементы на основе объектов, где не сохранены в дереве DOM - :hover :visted :focus и так далее.
- Языковые псевдоклассы, которые представляют один и тот же элемент, но на другом языке - :lang
- Пользовательский интерфейс заявляет, что представляет один и тот же элемент, но в другом состоянии - :disabled :checked и так далее.
- Структурные псевдоклассы, в которой информации присутствует в дереве DOM, однако их трудно выбрать с помощью простых селекторов - :first-child :nth-child() и так далее.
- Псевдокласс отрицания, представляющий элемент, не имеющий определенного состояния - :not()

Имени псевдокласса всегда предшествует двоеточие - :символ

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

В отличие от псевдокласса, где представляет виртуальный класс элемента, псевдоэлемент фактически представляет новый виртуальный элемент, который представляет часть элемента. Псевдоэлемент на самом деле отсутствует в дереве DOM, но выглядит так.

Некоторые из определенных селекторов псевдоэлементов:

Псевдоэлемент, представляющий первую строку элемента - ::first-line
Псевдоэлемент, представляющий сгенерированный контент после или до содержимого элемента - ::after ::before

К имени псевдоэлемента всегда добавляется двойное двоеточие - ::символы.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Псевдоклассы и псевдоэлементы в CSS (Разница между псевдоклассом и псевдоэлементом в CSS)
  • Страница 1 из 1
  • 1
Поиск: