Селекторы атрибутов

Селекторы атрибутов

По значению атрибута
[атрибут=“значение”] { … }
Пример
[href=“1.html”] {…}
…

Селекторы атрибутов

Начинается с определенного значения
[атрибут^=“значение”] { … }
Пример
[href^=“1”] {…}
…

Селекторы атрибутов

Заканчивается на определенное значение
[атрибут$=“значение”] { … }
Пример
[href$=“.html”] {…}
…

Селекторы атрибутов

Содержит текст
[атрибут*=“значение”] { … }
Пример
[href*=“html”] {…}
…
…
…
…
…

Селекторы атрибутов

Содержит значение (одно из разделенных пробелами)
[атрибут~=“значение”] { … }
Пример
[class~=“redText”] {…}
…

Селекторы атрибутов

Начинается со значения, после которого идёт дефис
[атрибут|=“значение”] { … }
Пример
[lang|=“en”]

Селекторы атрибутов

Комбинация селекторов атрибутов
[атрибут1=“X"][атрибут2=“Y"] {…}
Пример
[href=“1.html”][title=“First”] { }
…
…

Селекторы псевдоклассов

:active – активированный элемент (например, ссылка, по которой щелкнули мышью)
Пример
a:active

Селекторы псевдоклассов

:focus – еще не посещенная ссылка
Пример
a:link {…}
#bestLink:link {…}
Примечание
Записи a

Селекторы псевдоклассов

:link – элемент, получивший фокус (активное в данный момент текстовое

Селекторы псевдоклассов

:hover – элемент, на который наведен указатель мыши
Пример
a:hover {…}
table .activeCell:hover

Селекторы псевдоклассов

:visited – посещенные ссылки
Пример
a:visited {…}
a.menuLink:visited {…}

Селекторы псевдоклассов

:first-child – первый дочерний элемент элемента-родителя
Пример
div:first-child { }
…