| Следующая версия | Предыдущая версия |
| css:selectors [2022/11/10 10:26] – создано so_v_a | css:selectors [2026/08/06 09:25] (текущий) – so_v_a |
|---|
| | <!DOCTYPE markdown> |
| | |
| # CSS. Селекторы | # CSS. Селекторы |
| |
| Основных видов селекторов всего несколько: | Основных видов селекторов всего несколько: |
| |
| - `*` – любые элементы. | * `*` – любые элементы |
| - `div` – элементы с таким тегом. | * `div` – элементы с таким тегом |
| - `#id` – элемент с данным id. | * `#id` – элемент с данным id |
| - `.class` – элементы с таким классом. | * `.class` – элементы с таким классом |
| - `[name="value"]`` – селекторы на атрибут (см. далее). | * `[name="value"]` - селекторы на атрибут |
| - `:visited` – «псевдоклассы», остальные разные условия на элемент (см. далее). | * `:visited` - «псевдоклассы», остальные разные условия на элемент |
| |
| Селекторы можно комбинировать, записывая последовательно, без пробела: | Селекторы можно комбинировать, записывая последовательно, без пробела: |
| ``` | ``` |
| – элемент **a** с данным **id**, классами **c1** и **c2**, и псевдоклассом **visited** | – элемент **a** с данным **id**, классами **c1** и **c2**, и псевдоклассом **visited** |
| |
| |
| ## Отношения | ## Отношения |
| div ~ p | div ~ p |
| ``` | ``` |
| – правые соседи: все p на том же уровне вложенности, которые идут после div. | – правые соседи: все p на том же уровне вложенности, которые идут после div. |
| | |
| ```css | ```css |
| div + p | div + p |
| ``` | ``` |
| – первый правый сосед: p на том же уровне вложенности, который идёт **сразу после** div (если есть). | – первый правый сосед: p на том же уровне вложенности, который идёт **сразу после** div (если есть). |
| |
| ## Фильтр по месту среди соседей | ## Фильтр по месту среди соседей |
| Список псевдоклассов для этого: | Список псевдоклассов для этого: |
| |
| - **:first-child** – первый потомок своего родителя. | - **:first-child** – первый потомок своего родителя. |
| - **:last-child** – последний потомок своего родителя. | - **:last-child** – последний потомок своего родителя. |
| - **:only-child** – единственный потомок своего родителя, соседних элементов нет. | - **:only-child** – единственный потомок своего родителя, соседних элементов нет. |
| - **:nth-child(a)** – потомок номер a своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1. | - **:nth-child(a)** – потомок номер a своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1. |
| - **:nth-child(an+b)** – расширение предыдущего селектора через указание номера потомка формулой, где a,b – константы, а под n подразумевается любое целое число. Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо n. Например: | - **:nth-child(an+b)** – расширение предыдущего селектора через указание номера потомка формулой, где a,b – константы, а под n подразумевается любое целое число. Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо n. Например: |
| - :nth-child(2n) даст элементы номер 2, 4, 6…, то есть чётные. | - :nth-child(2n) даст элементы номер 2, 4, 6…, то есть чётные. |
| - :nth-child(2n+1) даст элементы номер 1, 3…, то есть нечётные. | - :nth-child(2n+1) даст элементы номер 1, 3…, то есть нечётные. |
| - :nth-child(3n+2) даст элементы номер 2, 5, 8 и так далее. | - :nth-child(3n+2) даст элементы номер 2, 5, 8 и так далее. |
| |
| - `:nth-last-child(a)`, `:nth-last-child(an+b)` – то же самое, но отсчёт начинается с конца. Например: | - **:nth-last-child(a)**, **:nth-last-child(an+b)** – то же самое, но отсчёт начинается с конца. Например: |
| - `:nth-last-child(2)` – второй элемент с конца. | * Элемент ненумерованного списка: `:nth-last-child(2)` – второй элемент с конца. |
| |
| |
| |
| Они имеют в точности тот же смысл, что и обычные :first-child, :last-child и так далее, но во время подсчёта игнорируют элементы с другими тегами, чем тот, к которому применяется фильтр. | Они имеют в точности тот же смысл, что и обычные :first-child, :last-child и так далее, но во время подсчёта игнорируют элементы с другими тегами, чем тот, к которому применяется фильтр. |
| |
| |
| ## Селекторы атрибутов | ## Селекторы атрибутов |
| |
| На атрибут целиком: | На атрибут целиком: |
| | |
| - [attr] – атрибут установлен, | - [attr] – атрибут установлен, |
| - [attr="val"] – атрибут равен val. | - [attr="val"] – атрибут равен val. |
| |
| На начало атрибута: | На начало атрибута: |
| | |
| - [attr^="val"] – атрибут начинается с val, например "value". | - [attr^="val"] – атрибут начинается с val, например "value". |
| - [attr|="val"] – атрибут равен val или начинается с val-, например равен "val-1". | - [attr|="val"] – атрибут равен val или начинается с val-, например равен "val-1". |
| |
| На содержание: | На содержание: |
| | |
| - [attr*="val"] – атрибут содержит подстроку val, например равен "myvalue". | - [attr*="val"] – атрибут содержит подстроку val, например равен "myvalue". |
| - [attr~="val"] – атрибут содержит val как одно из значений через пробел. Например: | - [attr~="val"] – атрибут содержит val как одно из значений через пробел. Например: |
| |
| На конец атрибута: | На конец атрибута: |
| | |
| - [attr$="val"] – атрибут заканчивается на val, например равен "myval". | - [attr$="val"] – атрибут заканчивается на val, например равен "myval". |
| |
| ## Псевдоэлементы ::before, ::after | ## Псевдоэлементы ::before, ::after |
| |
| «Псевдоэлементы» – различные вспомогательные элементы, которые браузер записывает или может записать в документ. | «[[psevdoelement|Псевдоэлементы]]» – различные вспомогательные элементы, которые браузер записывает или может записать в документ. |
| |
| При помощи псевдоэлементов ::before и ::after можно добавлять содержимое в начало и конец элемента. | При помощи псевдоэлементов ::before и ::after можно добавлять содержимое в начало и конец элемента. |
| |
| |
| #css | |
| |
