CSS селекторы
Селектор - это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.
Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.
К простым селекторам относятся:
- селектор типа
- универсальный селектор
- селекторы атрибутов
- селектор идентификатора
- селектор класса
- псевдо-классы
| CSS селектор | Пример | Описание | CSS |
|---|---|---|---|
| .class | .myClass |
Выбирает все элементы с классом myClass (class="myClass"). |
1 |
| #id | #main |
Выбирает элемент с идентификатором main (id="main"). |
1 |
| * | * |
Выбор всех элементов. | 2 |
| элемент | span |
Выбор всех элементов <span>. |
1 |
| элемент,элемент | div,span |
Выбор всех элементов <div> и всех элементов <span>. |
1 |
| [атрибут] | [title] |
Выбирает все элементы с атрибутом title. |
2 |
| [атрибут="значение"] | [title="cost"] |
Выбирает все элементы с атрибутом title, значение которого в точности совпадает со значением указанным в селекторе (title="cost"). |
2 |
| [атрибут~="значение"] | [title~="один"] |
Выбирает все элементы с атрибутом title, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) "один" (title="один и два"). |
2 |
| [атрибут|="значение"] | [lang|="ru"] |
Выбор всех элементов с атрибутом lang, значение которого начинается с "ru". |
2 |
| [атрибут^="значение"] | a[href^="https"] |
Выбор каждого элемента <a> с атрибутом href, значение которого начинается с "https". |
3 |
| [атрибут$="значение"] | [src$=".png"] |
Выбирает все элементы с атрибутом src, значение которого оканчивается на ".png" (src="some_img.png"). |
3 |
| [атрибут*="значение"] | [title*="один"] |
Выбирает все элементы с атрибутом title, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) "один" (title="один и два"). |
3 |
Составной селектор — это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор.
span[title].className p.className1.className2#someId:hover
Сложный селектор — это последовательность селекторов, которые разделены комбинаторами.
Список селекторов — это селекторы, перечисленные через запятую.
Комбинаторы
Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.
| Комбинатор | Пример | Описание | CSS |
|---|---|---|---|
| элемент элемент | div span |
Выбор всех элементов <span> внутри <div>. |
1 |
| элемент>элемент | div>span |
Выбирает все дочерние элементы <span>, у которых родитель - элемент <div>. |
2 |
| элемент+элемент | div+p |
Выбирает все элементы <p>, которые расположены сразу после элементов <div>. |
2 |
| элемент1~элемент2 | p~ol |
Выбор всех элементов <ol>, которым предшествует элемент <p>. |
3 |
Псевдо-классы
Псевдо-класс – это простой селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом.
| Псевдо-класс | Пример | Описание | CSS |
|---|---|---|---|
| :link | a:link |
Выбор всех не посещенных ссылок. | 1 |
| :visited | a:visited |
Выбор всех посещенных ссылок. | 1 |
| :active | a:active |
Выбор активной ссылки. | 1 |
| :hover | a:hover |
Выбор ссылки при наведении курсора мышки. | 1 |
| :focus | input:focus |
Выбор элемента <input>, который находится в фокусе. |
2 |
| :first-child | p:first-child |
Выбор каждого элемента <p>, который является первым дочерним элементом своего родителя. |
2 |
| :lang(язык) | p:lang(ru) |
Выбор каждого элемента <p> с атрибутом lang, значение которого начинается с "ru". |
2 |
| :first-of-type | p:first-of-type |
Выбор каждого элемента <p>, который является первым из элементов <p> своего родительского элемента. |
3 |
| :last-of-type | p:last-of-type |
Выбор каждого элемента <p>, который является последним из элементов <p> своего родительского элемента. |
3 |
| :only-of-type | p:only-of-type |
Выбор каждого элемента <p>, который является единственным элементом <p> своего родительского элемента. |
3 |
| :only-child | p:only-child |
Выбор каждого элемента <p>, который является единственным дочерним элементом своего родительского элемента. |
3 |
| :nth-child(n) | p:nth-child(2) |
Выбор каждого элемента <p>, который является вторым дочерним элементом своего родительского элемента. |
3 |
| :nth-last-child(n) | p:nth-last-child(2) |
Выбор каждого элемента <p>, который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента. |
3 |
| :nth-of-type(n) | p:nth-of-type(2) |
Выбор каждого элемента <p>, который является вторым дочерним элементом <p> своего родительского элемента. |
3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) |
Выбор каждого элемента <p>, который является вторым дочерним элементом <p> своего родительского элемента, считая от последнего дочернего элемента. |
3 |
| :last-child | p:last-child |
Выбор каждого элемента <p>, который является последним элементом своего родительского элемента. |
3 |
| :root | :root |
Выбор корневого элемента в документе. | 3 |
| :empty | p:empty |
Выбор каждого элемента <p>, который не содержит дочерних элементов (включая текст). |
3 |
| :target | :target |
Выбор текущего целевого элемента на странице, то есть элемента, к которому был осуществлён переход по ссылке внутри страницы. | 3 |
| :enabled | input:enabled |
Выбор каждого включенного элемента <input>. |
3 |
| :disabled | input:disabled |
Выбор каждого выключенного элемента <input>. |
3 |
| :checked | input:checked |
Выбор элемента <input>, выбранного по умолчанию или пользователем. |
3 |
| :not(селектор) | :not(p) |
Выбор всех элементов, кроме элемента <p>. |
3 |
Псевдо-элементы
Псевдо-элемент – это виртуальный элемент, который не существует в явном виде в дереве элементов документа. Псевдо-элементы используются для выбора тех частей элемента, которые не могут быть выбраны с помощью других селекторов, а также для стилизации не всего элемента, а отдельных его частей.
| Псевдо-элемент | Пример | Описание | CSS |
|---|---|---|---|
| ::first-letter | p::first-letter |
Выбор первой буквы каждого элемента <p>. |
1 |
| ::first-line | p::first-line |
Выбор первой строки каждого элемента <p>. |
1 |
| ::before | p::before |
Добавляет элемент с содержимым перед содержимым каждого элемента <p>. |
2 |
| ::after | p::after |
Добавляет элемент с содержимым после содержимого каждого элемента <p>. |
2 |