7.4. Псевдоэлементы и псевдоклассы
7.4. Псевдоэлементы и псевдоклассы
В языке CSS стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве HTML-документа. В большинстве случаев эта простая модель оказывается приемлемой, но все же иногда из-за структуры дерева документа она не позволяет реализовать некоторые желаемые результаты. Например, в HTML нет элемента, который бы указывал на первую строку абзаца, и поэтому нет простого селектора CSS, который бы мог указывать на нее.
В CSS вводится представление о псевдоэлементах и псевдоклассах, позволяющих осуществлять форматирование на основании информации, не включенной в дерево HTML-документа.
Сразу отмечу, что имена псевдоклассов и псевдоэлементов учитывают регистр.
Начнем изучение с псевдокласса: first-child.
Более 800 000 книг и аудиокниг! 📚
Получи 2 месяца Литрес Подписки в подарок и наслаждайся неограниченным чтением
ПОЛУЧИТЬ ПОДАРОКДанный текст является ознакомительным фрагментом.
Читайте также
Псевдоклассы ссылок
Псевдоклассы ссылок Обычно браузеры пользователей по-разному отображают просмотренные и непросмотренные ссылки. В 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 можно задать стиль и местоположение генерируемого содержимого. Не требуется особых познаний в английском языке, чтобы из названия догадаться, что эти псевдоэлементы определяют местоположение «перед» и
Псевдоэлементы
Псевдоэлементы Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы. Таким фрагментом может быть первый символ или первая строка в абзаце.Псевдоэлементы используются не сами по себе, а только в
Псевдоклассы
Псевдоклассы Псевдоклассы — самая мощная разновидность специальных селекторов. Они позволяют привязать стиль к элементам Web-страницы на основе их состояния (наведен на них курсор мыши или нет) и местоположения в родительском элементе.Псевдоклассы также используются
Псевдоклассы гиперссылок
Псевдоклассы гиперссылок Псевдоклассы гиперссылок служат для привязки стилей к гиперссылкам на основе их состояния: является гиперссылка посещенной или непосещенной, щелкает на ней посетитель мышью или только навел на нее курсор мыши и др.Все псевдоклассы гиперссылок,
Структурные псевдоклассы
Структурные псевдоклассы Структурные псевдоклассы позволяют привязать стиль к элементу Web-страницы на основе его местоположения в родительском элементе.Псевдоклассы: first-child и: last-child привязывают стиль к элементу Web-страницы, который является, соответственно, первым и
Псевдоклассы :not и *
Псевдоклассы :not и * Особый псевдокласс: not позволяет привязать стиль к любому элементу Web- страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:<основной селектор>:not(<селектор выбора>) { <стиль> }Стиль будет привязан к
Псевдоэлементы
Псевдоэлементы Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы. Таким фрагментом может быть первый символ или первая строка в абзаце.Псевдоэлементы используются не сами по себе, а только в
Псевдоклассы
Псевдоклассы Псевдоклассы — самая мощная разновидность специальных селекторов. Они позволяют привязать стиль к элементам Web-страницы на основе их состояния (наведен на них курсор мыши или нет) и местоположения в родительском элементе.Псевдоклассы также используются не
Псевдоклассы гиперссылок
Псевдоклассы гиперссылок Псевдоклассы гиперссылок служат для привязки стилей к гиперссылкам на основе их состояния: является гиперссылка посещенной или непосещенной, щелкает на ней посетитель мышью или только навел на нее курсор мыши и др.Все псевдоклассы гиперссылок,
Структурные псевдоклассы
Структурные псевдоклассы Структурные псевдоклассы позволяют привязать стиль к элементу Web-страницы на основе его местоположения в родительском элементе.Псевдоклассы: first-child и: last-child привязывают стиль к элементу Web-страницы, который является, соответственно, первым и
Псевдоклассы :not и *
Псевдоклассы :not и * Особый псевдокласс: not позволяет привязать стиль к любому элементу Web- страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:<основной селектор>:not(<селектор выбора>) { <стиль> }Стиль будет привязан