Виды селекторов

CSS может связываться с HTML элементами используя любые из его атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:

1	<h2 id="first-title" class="magical"    rel="friend">David Walsh</h2>

Этот один элемент имеет  три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-line) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:

1	h2[rel=friend] {
2	/* woohoo! */

3

}

Существует множество  селекторов атрибутов, мы не будем рассматривать  все возможные варианты, рассмотрим наиболее полезные сценарии, встречающиеся  в реальном мире.

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

В примере выше, мы использовали атрибут со значением «friend» у элемента h2. CSS селектор, который мы написали, нацелен на элемент h2, потому что его атрибут rel имеет значение «friend». Другими словами, знак равенства означает точное соответствие. Рассмотрим другие примеры.

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

Более реальный пример из жизни  — это стилизация списка блогов. Например у вас есть список ссылок на сайты друзей:

1	<a href="http://perishablepress.com">Jeff Starr</a>
2	<a href="http://davidwalsh.name">David Walsh</a>

3	<a href="http://accidentalninja.net/">Richard Felix</a>

Вы хотите сделать различные  стили для каждой из ссылок. Традиционный способ — задать каждой ссылке имя  класса, но это требует дополнительной разметки, что не всегда хорошо (для  семантики и прочего). Другой способ — это использование :nth-child, но для этого потребуется неизменный порядок списка. В данном случае идеальным решением будет использование селекторов атрибутов… Ссылки уже имеют уникальные атрибуты.

1	a[href=http://perishablepress.com] { color: red;  }

Я думаю, что чаще всего  селекторы атрибутов используют для элементов input. Это text, button, checkbox, file, hidden, image, password, radio, reset и submit. Все они являются элементом <input/> и все они очень разные. Так что делать, что то вроди input {padding: 10px;}, почти всегда плохая идея. Поэтому очень часто можно увидеть, нечто похожее на это:

1	input[type=text] { padding: 3px; }
2	input[type=radio] { float: left; }

Это единственный способ получить различные типы инпутов без добавления дополнительной разметки.

 

 

 

 

 

 

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

Именно здесь становится более интересно. Знаку равенства  в селекторе атрибута могут предшествовать другие символы изменяющие значение. Например, "*=" означает нахождение искомого значения в любом месте  значения атрибута. Посмотрим на пример:

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

Помните, что классы и ID тоже являются атрибутами, и могут быть использованы селектором атрибута. Допустим вы пишете CSS для сайта в котором вы не можете контролировать разметку и разработчики сделали три дива:

1	<div id="post_1"></div>
2	<div id="post_two"></div>

3	<div id="third_post"></div>

Вы можете выбрать их все:

1	div[id*=post] { color: red; }

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

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

Реальным примером использования может быть случай, когда вам нужно, что бы любая ссылка на сайт друга отличалась от других ссылок. Не важно это ссылка на главную страницу или внутреннюю, стиль должен быть одним.

1	a[href^=http://perishablepress.com] { color: red;  }

Это будет соответствовать  ссылке на главную и второстепенные страницы.

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

Мы можем выбирать основываясь на начальном значении атрибута, почему бы не выбирать с конечного?

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

Честно говоря, я изо  всех сил пытаюсь найти реальный пример использования этого. К примеру вы можете найти ссылки имеющие в конце определенные символы.

1	a[href$=#], a[href$=?] { color: red; }

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

Вы наверняка знаете, что  к элементу можно применять несколько  классов. Если вы это сделаете, вы можете использовать .class-name в CSS для связи. В селекторе атрибута не все так просто. Если ваш атрибут имеет несколько значений (например список разделенный пробелами) вам прийдется использовать "~=".

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

Вы можете подумать, зачем  это использовать, когда "*=" найдет то же самое и будет более гибким? Действительно, более универсально, но может быть слишком универсальным. Этот селектор требует места вокруг значения, когда *= нет. Так что если у вас есть два элемента, один с атрибутом rel="home friend-link", другой rel="home friend link". Вам понадобится селектор разделенный пробелами для связи с вторым элементом.

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

Список разделенный тире очень похож на список разделенный пробелами, и его так же используют для более строгого соблюдения правил, чем при использовании *=.

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

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

Вы можете использовать несколько  селекторов атрибутов в одном  селекторе, который требуют совпадения от всех условий.

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

Поддержка браузерами

Каждый приведенный выше пример работает во всех современных  браузерах: Safari, Chrome, Firefox, Opera и IE. Internet Explorer обладает превосходной поддержкой всего этого в 7 версии и нулевой поддержкой в 6 версии. Что бы протестировать в браузере — откройтетестовую страницу. Если строка/селектор красная — значит селектор работает.