CSS селекторы
Отредактировано: 21 Апреля 2018
Селекторы
| Название | Формат записи | Описание |
|---|---|---|
| Обычные | div {...} | имя html элемента |
| Универсальный | * {...} | любой элемент |
| Вложенные | div span {...} | элемент span в элементе div, с неограниченным количеством элементов между ними |
| Дочерние | div > span {...} | только дочерние |
| Соседние | div + span {...} | элемент span, только если он идет сразу после div |
| Родственные | div ~ span {...} | все элементы span идущие после div, в рамках общего родителя |
| Селекторы атрибутов |
[title], a[target]{...} |
все элементы с атрибутом title и ссылки с атрибутом target |
| [атрибут="значение"] | a[target="_blank"]{...} | определенное значение атрибута |
| [атрибут^="значение"] | a[href^="http://"] {...} | начинается с указанного текста |
| [атрибут$="значение"] | a[href$=".ru"] {...} | завершается заданным текстом |
| [атрибут*="значение"] | [href*="riwkus"] | указанный текст является частью значения |
| [атрибут~="значение"] | [class~="flex"] | используется для атрибутов в которых можно использовать несколько значений, сработает если указанное слово встречается в списке |
| [атрибут|="значение"] | div[class|="block"] | атрибут начинается с указанного значения, или с фрагмента значения, после которого идет дефис. |