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

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).

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

:nth­of­type() — выбирает элементы по аналогии с 

:nth­child(), при этом берет во внимание только тип элемента. 

:first­of­type — позволяет выбрать первый дочерний элемент. 

:last­of­type — выбирает последний тег конкретного типа. 

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

:only­of­type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

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

HTML		CSS
<ul>  <li>​Первый элемент<​/li>  <li>​Второй элемент​</li>  <li>​Третий элемент​</li> </ul>	li:​first­child​{  ​font­size:​ ​24px;  ​ color:​ ​#F23401;  }

 

Для того, чтобы понять, как работает данный псевдокласс, рассмотрим простой пример. Задаём элементу списка <li> псевдокласс first­child, и у него прописываем определенный стиль. Как видно, маркированный список, состоит из трех элементов. Заданный стиль будет применен ТОЛЬКО к первому элементу данного списка. Это происходит потому, что первый элемент списка <li> будет именно первым дочерним у тега <ul>.

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

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

/* При наведении на не посещенную ссылку цвет текста будет зеленым */ a​:​link​:​hover { color​:​ ​#0F0;

}

 

/* При наведении на посещенную ссылку цвет текста будет красным*/ a​:​visited​:​hover {

color:​ ​#F00;​

}

 

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

Псевдоэлементы ­ практически то же самое, что и псевдоклассы, только они позволяют ввести несуществующие элементы в веб­документ, и придать им определенные стили. Псевдоэлементы появились еще в CSS1, но пошли в релиз только в CSS2.1. В самом начале в синтаксисе использовалось одно двоеточие, но в CSS3 используется двойное двоеточие для отличия от псевдоклассов. Cовременные браузеры умеют понимать оба типа синтаксиса псевдоэлементов, кроме Internet Explorer 8, который воспринимает только одно двоеточие. Поэтому надежнее использовать одно.

С помощью свойства content, можно изменить внешний вид части элемента

 В CSS существует 4 псевдоэлемента:

:first­letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам. 

:first­line — выбирает первую строку текста элемента, применяется только к блочным элементам. 

:before — вставляет генерируемое содержимое перед элементом. 

:after — добавляет генерируемое содержимое после элемента.

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

HTML		CSS
<ul>  <li ​class​=​”new”​>​Первый элемент<​/li>  <li>​Второй элемент​</li>  <li>​Третий элемент​</li> </ul>	li:​after​{  ​content: ​“new”;  ​ color:​ ​#F00;  }

 

После элемента списка li с классом new появится текст new красного цвета.