4 мар. 2010 г.

Использования селекторов аттрибутов в 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; }

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

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


Комментариев нет:

Отправить комментарий