Атрибут точно соответствует заданному значению

[rel=external]

<h1 rel="external">Attribute Equals</h1>
h1[rel=external] { color: red; }

 

 

Атрибут содержит заданное значение.

[rel*=external]

<h1 rel="xxxexternalxxx">Attribute Contains</h1>
h1[rel*=external] { color: red;} 

 

 

Атрибут начинается с заданного значения

[rel^=external]

<h1 rel="external-link yep">Attribute Begins</h1>
h1[rel^=external] { color: red; }

 

 

Атрибут заканчивается на заданное значение

[rel$=external]

<h1 rel="friend external">Attribute Ends</h1>
h1[rel$=external] { color: red; }

 

 

Атрибут находится в списке, разделённом пробелами

[rel~=external]

<h1 rel="friend external sandwich">Attribute Space Separated</h1>
h1[rel~=external] { color: red; }

 

 

Атрибут находится в списке, разделённом дефисами

[rel|=external]

<h1 rel="friend-external-sandwich">Attribute Dash Separated</h1>
h1[rel|=external] { color: red; }

 

 

Соответствие по нескольким атрибутам

[title=one][rel^=external]

<h1 rel="handsome" title="Important note">Multiple Attributes</h1>
h1[rel=handsome][title^=Important] { color: red; }