7.4. Псевдоэлементы и псевдоклассы

7.4. Псевдоэлементы и псевдоклассы

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

В CSS вводится представление о псевдоэлементах и псевдоклассах, позволяющих осуществлять форматирование на основании информации, не включенной в дерево HTML-документа.

Сразу отмечу, что имена псевдоклассов и псевдоэлементов учитывают регистр.

Начнем изучение с псевдокласса: first-child.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

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

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов Владимир

Псевдоэлементы Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы. Таким фрагментом может быть первый символ или первая строка в абзаце.Псевдоэлементы используются не сами по себе, а только в


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

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир

Псевдоклассы Псевдоклассы — самая мощная разновидность специальных селекторов. Они позволяют привязать стиль к элементам Web-страницы на основе их состояния (наведен на них курсор мыши или нет) и местоположения в родительском элементе.Псевдоклассы также используются не


Псевдоклассы гиперссылок

Из книги HTML, XHTML и CSS на 100% автора Квинт Игорь

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


Структурные псевдоклассы

Из книги автора

Структурные псевдоклассы Структурные псевдоклассы позволяют привязать стиль к элементу Web-страницы на основе его местоположения в родительском элементе.Псевдоклассы: first-child и: last-child привязывают стиль к элементу Web-страницы, который является, соответственно, первым и


Псевдоклассы :not и *

Из книги автора

Псевдоклассы :not и * Особый псевдокласс: not позволяет привязать стиль к любому элементу Web- страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:<основной селектор>:not(<селектор выбора>) { <стиль> }Стиль будет привязан


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

Из книги автора

Псевдоэлементы Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы. Таким фрагментом может быть первый символ или первая строка в абзаце.Псевдоэлементы используются не сами по себе, а только в


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

Из книги автора

Псевдоклассы  Псевдоклассы — самая мощная разновидность специальных селекторов. Они позволяют привязать стиль к элементам Web-страницы на основе их состояния (наведен на них курсор мыши или нет) и местоположения в родительском элементе.Псевдоклассы также используются


Псевдоклассы гиперссылок

Из книги автора

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


Структурные псевдоклассы

Из книги автора

Структурные псевдоклассы Структурные псевдоклассы позволяют привязать стиль к элементу Web-страницы на основе его местоположения в родительском элементе.Псевдоклассы: first-child и: last-child привязывают стиль к элементу Web-страницы, который является, соответственно, первым и


Псевдоклассы :not и *

Из книги автора

Псевдоклассы :not и * Особый псевдокласс: not позволяет привязать стиль к любому элементу Web- страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:<основной селектор>:not(<селектор выбора>) { <стиль> }Стиль будет привязан к


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

Из книги автора

Псевдоклассы ссылок Обычно браузеры пользователей по-разному отображают просмотренные и непросмотренные ссылки. В CSS предусмотрены псевдоклассы: link и: visited для различения этих типов ссылок и задания им своего стиля:•:link – применяется, если ссылка не была


Динамические псевдоклассы

Из книги автора

Динамические псевдоклассы Иногда браузеры пользователей изменяют вид элементов HTML-документа после выполнения пользователем некоторых действий. В CSS предусмотрены три псевдокласса для наиболее часто встречающихся действий.•:hover – применяется, когда пользователь с


Псевдоэлементы :before и: after

Из книги автора

Псевдоэлементы :before и: after Псевдоэлементы: before и: after можно использовать для вставки генерируемого содержимого до или после содержимого элемента.h1:before {content: counter(chapno, upper-roman) ". "}Когда псевдоэлементы: first-letter и: first-line сочетаются с псевдоэлементами: before и: after, они применяются к


Псевдоэлементы :before и: after

Из книги автора

Псевдоэлементы :before и: after С помощью псевдоэлементов: before и: after можно задать стиль и местоположение генерируемого содержимого. Не требуется особых познаний в английском языке, чтобы из названия догадаться, что эти псевдоэлементы определяют местоположение «перед» и