Использования селекторов аттрибутов в CSS

Прочитав статью на хабре решил выложить ее и на своем блоге :) ну самое что не на есть нужное из данной статьи ссылка на хабр http://habrahabr.ru/blogs/css/85920/.


<h2 id="first-title" class="magical" rel="friend">David Walshh2>

CSS может управлять стилями html через id и class но узнав из статьи что есть еще и третий способ:
- это доступ по селектору атрибута

к примеру:

h2[rel=friend] {

  /* woohoo! */
}

Ниже рассмотрим какие бывают селекторы атрибутов все так же из статьи :) 

[rel=external] — Точное совпадение значения атрибута

<h1 rel="external">Attribute Equalsh1>

h1[rel=external] { color: red; }

[rel*=external] — Атрибут содержит некоторое значение в любом месте

<h1 rel="xxxexternalxxx">Attribute Containsh1>

h1[rel*=external] { color: red; }

[rel^=external] — Атрибут начинается с определенного значения

<h1 rel="external-link yep">Attribute Beginsh1>

h1[rel^=external] { color: red; }

[rel$=external] — Атрибут оканчивается определенным значением

<h1 rel="friend external">Attribute Endsh1>

h1[rel$=external] { color: red; }

[rel~=external] — Атрибут содержит значение в списке разделенном пробелами

<h1 rel="friend external sandwich">Attribute Space Separatedh1>

h1[rel~=external] { color: red; }

[rel|=external] — Атрибут содержит значение в списке разделенном тире

<h1 rel="friend-external-sandwich">Attribute Dash Separatedh1>

h1[rel|=external] { color: red; }

[title=one][rel^=external] — Совпадение нескольких атрибутов

<h1 rel="handsome" title="Important note">Multiple Attributesh1>

h1[rel=handsome][title^=Important] { color: red; }

Зачем я плагиачу ? да по сути это плагиат - да по сути потому что это как бы мой блог и что хочу то и пишу если я посчитал это интерестным то я опишу .

Кроме того что я с кем то нею поделюсь я еще смогу потом вернуться на мой блог и снова ее прочесть не иская при этом в закладках или еще каких то архивах...