CSS селекторы: псевдо-классы и псевдо-элементы
Селекторы по псевдо-классу элемента (pseudo-classes)
Концепция псевдо-классов позволяет «выделять» не отмеченные тегами части документа по их псевдо-признакам. Псевдо-классы указываются через двоеточие.
Псевдо-классы «детей»
Формально на элементе может быть не указан какой-то специальный класс, идентификатор, атрибут, но элемент может быть определён и найден с помощью псевдо-класса.
Например, элемент может быть первым или последним внутри какого-то другого элемента. Может быть единственным или стоять каким-то определённым номером по порядку.
E:first-child { styles block }
Селектор первого «ребёнка»
Селектор «выделит» все элементы типа E, которые идут первыми внутри какого-то другого элемента.
E:last-child { styles block }
Селектор последнего «ребёнка»
Селектор «выделит» все элементы типа E, которые идут последними внутри другого элемента.
E:only-child { styles block }
Селектор единственного «ребёнка»
Селектор выделит все элементы типа E только при условии, что каждый элемент один единственный находится внутри какого-то другого элемента.
E:first-of-type { styles block }
Селектор первого «ребёнка» по типу элемента
Селектор «выделит» все элементы типа E, которые также являются первыми внутри какого-то другого элемента.
E:last-of-type { styles block }
Селектор последнего «ребёнка» по типу элемента
Селектор «выделит» все элементы типа E, которые также являются последними внутри какого-то другого элемента.
E:only-of-type { styles block }
Селектор единственного «ребёнка» по типу элемента
Селектор «выделит» все элементы типа E, которые также являются единственными внутри какого-то другого элемента.
Селекторы по порядковому псевдо-классу «детей»
E:nth-child(n) { styles block }
Селектор «ребёнка» по порядку
«Выделит» все элементы типа E, которые являются «детьми» какого-то другого элемента и стоят по порядку под номером n (задаётся целым числом).
E:nth-last-child(n) { styles block }
E:nth-of-type(n) { styles block }
E:nth-last-of-type(n) { styles block }
Композитные селекторы «детей» по псевдо-классу
В этих селекторах совмещается техника выделения элементов стоящих последними, элементов по типу и стоящих в определённом порядке.
Другие селекторы по псевдо-классу
E:empty { styles block }
Селектор пустого элемента
Выделит все элементы типа E, внутри которых нет никакого контента и никаких других элементов.
E:target { styles block }
Селектор «якорных ссылок»
«Выделит» все элементы типа E, которые являются ссылками на какую-то часть страницы, на которой находится элемент.
E:not(F) { styles block }
Селектор «не»
«Выделит» все элементы типа E, которые не являются F. В качестве F можно использовать классы, идентификаторы, другие псевдо-классы и прочее.
Селекторы элементов по динамическому псевдо-классу (dynamic pseudo-classes)
Селекторы по псевдо-классу состояния ссылки (link pseudo-classes)
E:link { styles block }
Селектор непосещённой ссылки
Выделит все элементы, которые являются ссылками и по которым пользователь ещё не переходил.
E:visited { styles block }
Селектор посещённой ссылки
Выделит все элементы, которые являются ссылками и по которым пользователь уже переходил.
Селекторы по интерактивным псевдо-классам
E:hover { styles block }
Селектор элемента в состоянии «при наведении»
Выделит все элементы типа E, состояние которых в данный момент «при наведении». То есть над которыми пользователь в данный момент держит курсор.
E:active { styles block }
Селектор элемента в состоянии «при нажатии»
Выделит элемент типа E, на который пользователь нажал курсором и в данным момент держит элемент в «активном» состоянии.
E:focus { styles block }
Селектор элемента в состоянии «фокуса»
Выделит элемент типа E, который находится в состоянии «фокуса». В таком состоянии могут находится различные виды полей ввода и другие элементы ввода информации.
Селекторы элементов по их состоянию (UI element states pseudo-classes)
E:enabled { styles block }
E:disabled { styles block }
Селекторы «вслюченности»
Выделяют все элементы типа E, если доступны для взаимодействия с ними или не доступны. Применяется на интерактивных элементах, полях ввода, кнопках.
E:checked { styles block }
E:not(:checked) { styles block }
Селектор «поставленной галочки»
Выделит все элементы типа E, у которых стоит «галочка». Применяется на элементах типа: checkbox, radio. При совмещении с псевдо-классом: not можно выделить все элементы, у которых не стоит «галочка».
Селекторы псевдо-элементов
Ещё одна концепция, которая позволяет создавать и выделять так называемые псевдо-элементы. Псевдо-элементы указываются через двойное двоеточие.
Псевдо-элемент — это метафора, которая обозначает, элемент, который вы намеренно не выделяли тегами, но этот элемент концептуально существует.
Например, первый символ в строке или первая строка в параграфе. Также можно выделить и одновременно создать псевдо-элемент до выбранного элемента или после него.
E:first-letter { styles block }
Псевдо-элемент первой буквы
«Выделит» первую букву в тексте внутри всех элементов типа E. Таким способом можно сделать оформление типа «буквица».
E:first-line { styles block }
Селектор первой строки (first-line pseudo-element)
Выделит все первые строки всех элементов типа E.
E:before { styles block }
E:after { styles block }
Селекторы создания псевдо-элементов до или после элемента
Селекторы создают новый элемент, который будет стоять до или после всех элементов типа E. В псевдо-элемент можно добавить контент.
Техника применима для создания булетов у списков, расположения различных иконок перед сектом у кнопки, для добавления графичных кавычек к цитатам, и для прочего оформления.
Существует ещё большое количество селекторов, которые реже применяются. Для того, чтобы полноценно ориентироваться в текущем стандарте CSS Selectors изучайте веб-стандарт CSS Selectors Level 3.
Для того, чтобы знать, как будет развиваться веб и в частности CSS селекторы, необходимо следить за обновлением документации нового уровня этого стандарта на W3C.
