Селекторы CSS
CSS селектор — это то что позволяет выбирать нужный элемент в HTML документе, чтобы потом применить к этому элементу CSS стили.
Основные виды селекторов
* – все элементы страницы.
#id * - все потомки элемента с id (можно и с классами)
div – все элементы с таким тегом.
#id – все элемент с данным id.
.class – все элементы с таким классом.
Селекторы можно комбинировать, записывая последовательно, без пробела:
.c1.c2 – элементы одновременно с двумя классами c1 и c2
a#id.c1.c2:visited – элемент a с данным id, классами c1 и c2, и псевдоклассом visited
По методологии БЭМ все элементы HTML должны иметь class, а поиск для работы в css и js должен осуществляться только по селектору класса.
Селекторы отношения
div p – все элементы p, являющиеся потомками div.
div > p – только прямого потомки (на один уровень ниже div)
div + p - Это соседний селектор. Он поможет нам выбрать только тот элемент, который следует сразу же за указанным элементом. В этом примере мы выберем только первый параграф текста, следующий сразу за тэгом div
div ~ p – Выберет все элементы р, расположенные после элемента div
Фильтр по месту среди соседей
:first-child – первый потомок своего родителя.
:last-child – последний потомок своего родителя.
:only-child – единственный потомок своего родителя, соседних элементов нет.
:nth-child(a) – потомок номер a своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1.
:nth-child(an+b) – расширение предыдущего селектора через указание номера потомка формулой, где a,b – константы, а под n подразумевается любое целое число.
Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо n. Например: -:nth-child(2n) даст элементы номер 2, 4, 6…, то есть чётные.
:nth-child(2n+1) даст элементы номер 1, 3…, то есть нечётные.
:nth-child(3n+2) даст элементы номер 2, 5, 8 и так далее.
:nth-last-child(a), :nth-last-child(an+b) – то же самое, но отсчёт начинается с конца, например :nth-last-child(2) – второй элемент с конца.
Селекторы атрибутов
[attr] – атрибут установлен,
[attr="val"] – атрибут равен val.
[attr^="val"] – атрибут начинается с val, например "value".
[attr|="val"] – атрибут равен val или начинается с val-, например равен "val-1".
[attr*="val"] – атрибут содержит подстроку val, например равен "myvalue".
[attr~="val"] – атрибут содержит val как одно из значений через пробел.
Например: [attr~="delete"] верно для "edit delete" и неверно для "undelete" или "no-delete".
[attr$="val"] – атрибут заканчивается на val, например, равен "myval".