Основные виды селекторов CSS представлены в таблице 1.

Таблица 1 – Виды селекторов CSS

Виды селекторов	Пример
Селекторы элементов	p {font-family: Garamond, serif;}
Селекторы классов	.note {color: red; background: yellow; font-weight: bold;}
Селекторы идентификаторов	#paragraph1 {margin: 0;}
Селекторы атрибутов	a[href="#"]{font-weight:bold;}
Селекторы потомков (контекстные селекторы)	div#paragraph1 p.note {color: red;}
Селекторы дочерних элементов	p.note > b {color: green;}
Селекторы сестринских элементов	h1 + p {font-size: 24pt;}
Селекторы псевдоклассов	a:active {color:yellow;}
Селекторы псевдоэлементов	p:first-letter {font-size: 32px;}

Также в CSS существует так называемый универсальный селектор, обозначающий любой элемент, встречающийся в документе. Например, *{color:red;}. Перед любым селектором, задающим класс или идентификатор, можно поставить знак универсального селектора, в результате получится эквивалентное выражение, например, .first {...} и *.first {...} имеют один и тот же смысл.

Самые известные псевдоклассы:это :link, :hover, :visited и :active.

Обычно псевдоклассы используют в основном для задания стилей ссылок, например :link для непосещенной ссылки, :hover для ссылки при наведении, :active для нажатой и удерживаемой ссылки и :visited для посещенной.

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

#d3{ border:solid yellow 2px;}

#d3:hover{border:solid blue 4px;}
.btn{border:solid grey 1px;

box-shadow: 0 1px 1px #777;

border-radius: 7px;

color:yellow;}

.btn:active{ border:solid red 2px;

box-shadow: 0 1px 1px #555;

border-radius: 15px;

color:blue;

font-size:24px;

font-style:bold;}

:link — отвечает за стили непосещенной ссылки;

:hover — состояние объекта (не обязательно ссылки) при наведении на него мышкой;

:active — состояние активного объекта (например, для ссылки и зажатие ее мышкой);

:visited — состояние посещенной ссылки;

:focus —устанавка фокуса (в случае с текстовым полем - это постановка курсора в это поле);

:first-child — первый дочерний элемент текущего элемента;

:last-child — соответственно, последний дочерний элемент элемента;

:only-child — применяет стиль к элементу, если он единственный дочерний элемент;

:nth-child() — какой-то по счету с начала дочерний элемент, например p:nth-child(4);

:nth-last-child() — аналогично, только отчет с конца; интересно, что в этом и предыдущем селекторах можно задавать не только конкретные цифры, но и счетность, к примеру вот так: ul li:nth-last-child(2n+1);

:lang() — если у элемента указан язык (с помощью атрибута lang, например lang="en"), то этот элемент можно выбрать таким образом;

:root — дает указание применить стиль к корневому элементу (в html документе это тег );

:not() — дает ограничение на применение стилей по селектору (то есть селектор .red-block:not(div) применит указанный стиль ко всем элементам с классом .red-block, только есть этот элемент не