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

• По наличию атрибута

[атрибут] { … }

Пример

[href] {…}

…

<a href=“1.html”></a> <a name=“top”></a>

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

• По значению атрибута

[атрибут=“значение”] { … }

Пример

[href=“1.html”] {…}

…

<a href=“1.html”></a> <a href=“2.html”></a>

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

•Начинается с определенного значения

[атрибут^=“значение”] { … }

Пример

[href^=“1”] {…}

…

<a href=“1.html”></a> <a href=“12.html”></a> <a href=“21.html”></a>

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

•Заканчивается на определенное значение

[атрибут$=“значение”] { … }

Пример

[href$=“.html”] {…}

…

<a href=“1.html”></a> <a href=“1.xhtml”></a> <a href=“html.php”></a>

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

• Содержит текст

[атрибут*=“значение”] { … }

Пример

[href*=“html”] {…}

…

<a href=“1.html”>…</a> <a href=“1.xhtml”>…</a> <a href=“html.php”>…</a> <a href=“dhtml.php”>…</a> <a href=“ht1ml.php”>…</a>

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

•Содержит значение (одно из разделенных пробелами)

[атрибут~=“значение”] { … }

Пример

[class~=“redText”] {…}

…

<b class=“redText”>…</b>

<b class=“redText bigText”>…</b> <b class=“smallText redText”>…</b> <b class=“redText1”>…</b>

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

•Начинается со значения, после которого идёт дефис

[атрибут|=“значение”] { … }

Пример

[lang|=“en”] { }

…

<div lang="en-us"></div> <div lang="us-en"></div>

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

• Комбинация селекторов атрибутов

[атрибут1=“X"][атрибут2=“Y"] {…}

Пример

[href=“1.html”][title=“First”] { }

…

<a href=“1.html” title=“First”>…</a> <a href=“1.html”>…</a>

<a name=“top” title=“First”>…</a>

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

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

Пример a:active {…}

.bigLink:active {…}

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

• :focus – еще не посещенная ссылка

Пример a:link {…}

#bestLink:link {…}

Примечание

Записи a и a:link равносильны, т.е. :link можно опускать