Файл: Основные селекторы.pdf

Основные селекторы
* все элементы, div * – все дочерние элементы h1 по тегу
#id по id
.class по классу
.class1.class2 одновременно с двумя классами p strong вложенные ul > li только первого уровня вложенности div + p соседние, первый абзац, следующий за div div p родственные, все абзацы, следующие за div
Селекторы атрибутов:
[checked] присутствует атрибут
[attr="value"] атрибут равен "value"
[attr^="http"] атрибут начинается с текста
[attr$=".com"] атрибут заканчивается на текст
[attr|="value"] атрибут равен "value" или начинается с "value-"
[attr*="valut"] атрибут содержит подстроку "value"
[attr="bar"] атрибут содержит "bar" как одно из значений через пробел
Селектор псевдокласса
:link не посещенная ссылка
:visited посещенная ссылка
:hover элемент под курсором мыши
:focus ссылка или поле ввода в фокусе
:active элемент, который был активизирован пользователем
:valid элементы, у которых введенно верное значение
:invalid элементы, у которых введенно не верное значение
:enabled не заблокированные элементы (не установлен disabled)
:disabled заблокированные элементы
(установлен атрибут disabled)
:in-range выбирает все элементы, значение которых попадает в установленный диапазон
:out-of-range выбирает все элементы, значение которых не попадает в установленный диапазон
:lang() элементы с текстом на указанном языке
:not(селектор) элементы, которые не содержат указанный селектор
:target элемент с символом #, на который ссылаются в документе
:checked выделенные (выбранные пользователем) элементы формы.
Селектор структурных псевдоклассов
:nth-child(odd) нечётные дочерние элементы
:nth-child(even) чётные дочерние элементы
:nth-child(3n) каждый третий элемент среди дочерних
:nth-child(3n+2) выбирает каждый третий элемент, начиная со второго дочернего элемента (+2)
:nth-child(n+2) выбирает все элементы, начиная со второго
:nth-child(3) выбирает третий дочерний элемент
:nth-last-child() в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с :nth- child(), но начиная с последнего, в обратную сторону
:first-child позволяет оформить только самый первый дочерний элемент тега
:last-child позволяет форматировать последний дочерний элемент тега
:only-child выбирает элемент, являющийся единственным дочерним элементом
:empty выбирает элементы, у которых нет дочерних элементов
:root выбирает элемент, являющийся корневым в документе - элемент html.
Селектор структурных псевдоклассов типа
:nth-of-type() выбирает элементы по аналогии с :nth-child(), при этом берёт во внимание только тип элемента
:first-of-type выбирает первый дочерний элемент данного типа
:last-of-type выбирает последний элемент данного типа
:nth-last-of-type() выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца
:only-of-type выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.
Селектор псевдоэлемента
:first-letter выбирает первую букву каждого абзаца, применяется только к блочным элементам
:first-line выбирает первую строку текста элемента, применяется только к блочным элементам
:before вставляет генерируемое содержимое перед элементом
:after добавляет генерируемое содержимое после элемента.