С помощью селекторов Вы можете выбирать элементы на страницах для оформления.
ТвитнутьВ поле статус указано присутствовал ли данный селектор в предыдущих версиях CSS (-) или был добавлен в CSS3 (новый).
Обратите внимание: щелните на название селектора, чтобы перейти к примеру с его использованием в онлайн-редакторе.
| Селектор | Пример | Описание | Статус |
|---|---|---|---|
| #идентификатор | #el1 | Выберет все элементы на странице, которые имеют идентификатор el1 (которые имеют атрибут id='el1'). | - |
| .класс | .group1 | Выберет группу элементов на странице, которые имеют класс group1 (которые имеют атрибут class='group1'). | - |
| элемент | p | Выберет все абзацы на странице. | - |
| * | * | Выберет все элементы на странице. | - |
| :not(x) | :not(div) | Выберет все элементы на странице кроме элементов div. | новый |
| :link | a:link | Выберет все не посещенные ссылки на странице. | - |
| :visited | a:visited | Выберет все посещенные ссылки на странице. | - |
| :hover | a:hover | Выберет все ссылки, на которые наведен курсор мыши. | - |
| :active | a:active | Выберет все активные в данный момент ссылки (на которые щелкнули мышкой). | - |
| [атрибут] | p[id] | Выберет все абзацы на странице, которые имеют атрибут id. | - |
| ::selection | ::selection | Оформляет выделенный пользователем текст. | новый |
| [атрибут=значение] | p[id="el1"] | Выберет все абзацы на странице, которые имеют атрибут id со значением el1. | - |
| [атрибут~=значение] | a[href~="wisdomweb]" | Выберет все ссылки с атрибутом href содержащим в значении подстроку "wisdomweb" отделенную пробелами от остального содержимого. | - |
| [атрибут^=значение] | [src^="http://"] | Выберет все элементы имеющие атрибут src со значением начинающимся на "http://". | новый |
| [атрибут$=значение] | [src$=".gif"] | Выберет все элементы имеющие атрибут src со значением заканчивающимся на ".gif". | новый |
| [атрибут=*значение] | [src*="picture"] | Позволяет выбрать все элементы имеющие атрибут src со значением содержащим подстроку "picture". | новый |
| :first-child | p:first-child | Выберет все абзацы, которые являются первыми в родительском элементе. | - |
| :last-child | div:last-child | Позволяет выбрать все элементы div являющиеся последними элементами потомками в родительском. | новый |
| :first-line | p:first-line | Оформит первую сточку всех абзацев на странице. | - |
| :first-letter | p:first-letter | Оформит первую букву всех абзацев на странице. | - |
| эл1 эл2 | div p | Выберет все абзацы являющиеся потомками элемента div. | - |
| эл1 > эл2 | div > p | Выберет все абзацы являющиеся потомками элемента div. | - |
| эл1 + эл2 | div + p | Выберет все абзацы следующие после элемента div. | - |
| элемент1~элемент2 | div~p | Выберет все элементы div находящиеся перед элементом p. | новый |
| :before | p:before | Вставит произвольное содержимое перед элементом p. | - |
| :after | p:after | Вставит произвольное содержимое после элемента p. | - |
| :focus | input:focus | Выберет все активные элементы ввода на странице. | - |
| :enabled | :enabled | Позволяет выбрать все работоспособные элементы ввода. | новый |
| :disabled | :disabled | Позволяет выбрать все неработоспособные элементы ввода. | новый |
| :first-of-type | div:first-of-type | Позволяет выбрать все элементы div являющиеся первыми в родительском. | новый |
| :last-of-type | div:last-of-type | Позволяет выбрать все элементы div являющиеся последними в родительском. | новый |
| :only-of-type | div:only-of-type | Позволяет выбрать все элементы div, которые являются уникальными родительском. | новый |
| :nth-child(x) | div:nth-child(3) | Позволяет выбрать все элементы div являющиеся третьими по счету в родительском. | новый |
| :nth-last-child(x) | div:nth-last-child(2) | Позволяет выбрать все элементы div являющиеся вторыми элементами потомками в родительском с конца. | новый |
| :root | :root | Позволяет выбрать корневой элемент документа. | новый |
| :empty | p:empty | Позволяет выбрать пустые абзацы. | новый |
