Псевдоклассы, структурные

Оглавление

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

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

Псевдоклассы, определяющие состояние элементов

Псевдоклассы, структурные

Псевдоклассы по типу дочернего элемента

Пример использования псевдоклассов

Комбинирование псевдоклассов

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

Пример использования псевадоэлементов

Для чего нужны таблицы в HTML

Структура таблицы в html

Создание ячеек таблицы

Теги группирования строк html таблицы

Группировка строк и столбцов таблицы

 

Объединение ячеек таблицы

Вложенные таблицы

Стилевое оформление таблиц

Основные теги для верстки

Блочные элементы

Строчные элементы

Практика

Создание стилей для меню сайта

Домашнее задание

Дополнительные материалы

Используемая литература

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

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

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

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

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

Селектор:псевдокласс​ { свойство1​:​ ​значение​        1​; }   a​:​hover { color​:​ ​#ccc; }

 

После селектора ставится двоеточие, и сразу после него без пробела, указывается название псевдокласса.

Псевдоклассы, определяющие состояние элементов

a:link — ссылается на непосещенную ссылку. a:visited — ссылается на уже посещенную ссылку. a:hover — ссылается на любой элемент, по которому проводят курсором мыши. a:focus — ссылается на любой элемент, над которым находится курсор мыши. a:active — ссылается на элемент, который был активизирован пользователем. 

:valid — выберет поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу. 

:invalid — выберет поля формы, содержимое которых не соответствует указанному типу.:enabled — выберет все доступные (активные) поля форм. 

:disabled — выберет заблокированные поля форм, т.е. находящиеся в неактивном состоянии. 

:in­range — выберет поля формы, значения которых находятся в заданном диапазоне. 

:out­of­range — выберет поля формы, значения которых не входят в установленный диапазон. 

:lang() — выбирает абзацы на указанном языке.:not(селектор) — выберет элементы, которые не содержат указанный селектор, например, класс, идентификатор или селектор элемента 

:not([type="submit"]).:target — выбирает элемент с символом #, на который ссылаются в документе.

 :checked — выбирает выделенные (выбранные пользователем) элементы.

Псевдоклассы, структурные

:nth­child(odd) — выбирает нечетные дочерние элементы.

:nth­child(even) — выбирает четные дочерние элементы. 

:nth­child(3n) — выбирает каждый третий элемент среди дочерних. 

:nth­child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2). 

:nth­child(n+2) — выбирает все элементы, начиная со второго. 

:nth­child(3) — выбирает третий дочерний элемент. 

:nth­last­child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth­child(), но начиная с последнего, в обратную сторону. 

:first­child — позволяет оформить только самый первый дочерний элемент тега.

:last­child — позволяет форматировать последний дочерний элемент тега. 

:only­child — выбирает элемент, являющийся единственным дочерним элементом. 

:empty — выбирает элементы, у которых нет дочерних элементов. 

:root — выбирает элемент, являющийся корневым в документе (элемент html).