Новости
14.08.2017
Крауд-маркетинг: сарафанное радио по-современному Крауд-маркетинг: сарафанное радио по-современному

Крауд-маркетинг – скрытый или «партизанский» вариант интернет-маркетинга, основанный на использовании рекомендаций/ответов на всевозможных форумах, блогах и прочих платфо...

02.08.2017
UX и веб-дизайна: знайте их тренды в лицо! UX и веб-дизайна: знайте их тренды в лицо!

Еще никогда создание и продвижение сайтов не сопровождалось столь трепетным отношеием к UX и веб-дизайну. Какие же тренды и модные веяния нужно применять, чтобы существен...

26.07.2017
Интернет-магазин: психологические способы увеличения продаж Интернет-магазин: психологические способы увеличения продаж

Продвижение сайта коммерческого назначения – процесс творческий, требующий постоянного поиска все новых и новых способов увеличения прибыли. Выигрышные позиции в поисково...

Мировые новости


08.01.2016
Что такое псевдоклассы и псевдоэлементы в CSS

Что такое псевдоклассы и псевдоэлементы в CSS

Работая с CSS и читая документацию не раз можно столкнуться с определением псевдоклассы и псевдоэлементы CSS. Давайте разберемся, что это такое.
Как правило, все стили CSS, которые мы привыкли использовать, применяются для элементов, которые можно обнаружить в дереве (структуре) документа. С ними все понятно их можно увидеть в исходном коде документа и с ними можно взаимодействовать.
 
Но, есть ряд элементов и состояний элементов, которые не отображаются в дереве (структуре) документа, но к ним точно также необходимо применять определенные стили CSS. Например, не существует какого-то конкретного элемента, который можно увидеть в исходном коде документа, для первой буквы в слове, для области, которая располагается перед определенным элементом, и.т.д. Кроме того, конкретными тэгами мы не можем описать состояние элемента, например, отобразить ссылку, по которой уже был выполнен переход, или ссылку на которую наведен курсор мыши.
 
Как получить доступ к таким элементам на странице? Для решения этой проблемы используются специальные селекторы, которые называются псевдоэлементы и псевдоклассы.
Что это такое?
 
Псевдоклассы – это селекторы, которые определяют состояние уже существующих элементов, которое может меняться при определенных условиях.
 
Псевдоэлементы – это селекторы, которые определяют область элементов, которая изначально отсутствует в дереве документа. Эта область создается искусственно с помощью CSS.
 
Ключевое отличие между ними в том, что псевдоклассы определяют именно состояние элементов, которые уже существуют на странице, а псевдоэлементы создают области (искусственные элементы), которых изначально на веб-странице не было. Но и те и другие отсутствуют в исходном коде документа.
 
Чтобы понять, что именно относятся к псевдоклассам, а что к псевдоэлементам, приведем официальный список из документации.
 
Псевдоклассы элемента <A> (ссылок):
 
A:link { Стиль элемента }
A:visited { Стиль элемента }
 
A:link - непосещенная ссылка, A:visited - стиль отображения ссылки которую вы уже посещали.
 
Динамические псевдоклассы
 
Для ссылок, на которые наведен курсор мыши, активизированных и получивших фокус:
 
A:hover { Стиль элемента }
A:active { Стиль элемента }
A:focus { Стиль элемента }
 
A:hover - задает стиль элемента <A> при наведении курсора, A:active - активизированная ссылка (кнока мыши уже нажата, попробуйте перетащить ссылку мышкой), A:focus - если ссылка в фокусе (передача фокуса ссылке любым путем, например, при переходе по ссылкам кнопкой Tab).
 
Псевдоэлементы
 
P:first-line { Стиль элемента }
P:first-letter { Стиль элемента }
 
P:first-line - задает стиль отображения первой строки, P:first-letter - стиль первой буквы.