Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Псевдоклассы, определяющие состояние элементов
a:link — ссылается на непосещенную ссылку. a:visited — ссылается на уже посещенную ссылку. a:hover — ссылается на любой элемент, по которому проводят курсором мыши. a:focus — ссылается на любой элемент, над которым находится курсор мыши. a:active — ссылается на элемент, который был активизирован пользователем. :valid — выберет поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу. :invalid — выберет поля формы, содержимое которых не соответствует указанному типу.:enabled — выберет все доступные (активные) поля форм. :disabled — выберет заблокированные поля форм, т.е. находящиеся в неактивном состоянии. :inrange — выберет поля формы, значения которых находятся в заданном диапазоне. :outofrange — выберет поля формы, значения которых не входят в установленный диапазон. :lang() — выбирает абзацы на указанном языке.:not(селектор) — выберет элементы, которые не содержат указанный селектор, например, класс, идентификатор или селектор элемента :not([type="submit"]).:target — выбирает элемент с символом #, на который ссылаются в документе. :checked — выбирает выделенные (выбранные пользователем) элементы. Псевдоклассы, структурные :nthchild(odd) — выбирает нечетные дочерние элементы. :nthchild(even) — выбирает четные дочерние элементы. :nthchild(3n) — выбирает каждый третий элемент среди дочерних. :nthchild(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2). :nthchild(n+2) — выбирает все элементы, начиная со второго. :nthchild(3) — выбирает третий дочерний элемент. :nthlastchild() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nthchild(), но начиная с последнего, в обратную сторону. :firstchild — позволяет оформить только самый первый дочерний элемент тега. :lastchild — позволяет форматировать последний дочерний элемент тега. :onlychild — выбирает элемент, являющийся единственным дочерним элементом. :empty — выбирает элементы, у которых нет дочерних элементов. :root — выбирает элемент, являющийся корневым в документе (элемент html). Псевдоклассы по типу дочернего элемента :nthoftype() — выбирает элементы по аналогии с :nthchild(), при этом берет во внимание только тип элемента. :firstoftype — позволяет выбрать первый дочерний элемент.
:lastoftype — выбирает последний тег конкретного типа. :nthlastoftype() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца. :onlyoftype — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента. Пример использования псевдоклассов
Для того, чтобы понять, как работает данный псевдокласс, рассмотрим простой пример. Задаём элементу списка <li> псевдокласс firstchild, и у него прописываем определенный стиль. Как видно, маркированный список, состоит из трех элементов. Заданный стиль будет применен ТОЛЬКО к первому элементу данного списка. Это происходит потому, что первый элемент списка <li> будет именно первым дочерним у тега <ul>. Комбинирование псевдоклассов Псевдоклассы можно комбинировать в одном селекторе, просто перечисляя их через двоеточие, как показано в следующем примере. /* При наведении на не посещенную ссылку цвет текста будет зеленым */ a:link:hover { color: #0F0; }
/* При наведении на посещенную ссылку цвет текста будет красным*/ a:visited:hover { color: #F00; }
Псевдоэлементы Псевдоэлементы практически то же самое, что и псевдоклассы, только они позволяют ввести несуществующие элементы в вебдокумент, и придать им определенные стили. Псевдоэлементы появились еще в CSS1, но пошли в релиз только в CSS2.1. В самом начале в синтаксисе использовалось одно двоеточие, но в CSS3 используется двойное двоеточие для отличия от псевдоклассов. Cовременные браузеры умеют понимать оба типа синтаксиса псевдоэлементов, кроме Internet Explorer 8, который воспринимает только одно двоеточие. Поэтому надежнее использовать одно. С помощью свойства content, можно изменить внешний вид части элемента В CSS существует 4 псевдоэлемента: :firstletter — выбирает первую букву каждого абзаца, применяется только к блочным элементам.
:firstline — выбирает первую строку текста элемента, применяется только к блочным элементам. :before — вставляет генерируемое содержимое перед элементом. :after — добавляет генерируемое содержимое после элемента. Пример использования псевадоэлементов
После элемента списка li с классом new появится текст new красного цвета.
|
||||||||||||||||||
Последнее изменение этой страницы: 2021-04-20; просмотров: 58; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.16.68.49 (0.006 с.) |