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

http://css-tricks.com/attribute-selectors/
  • Перевод
CSS может связываться с HTML элементами используя любые из его атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:
<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-title) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:
h2[rel=friend] {
  /* woohoo! */
}


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

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


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

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

Более реальный пример из жизни — это стилизация списка блогов. Например у вас есть список ссылок на сайты друзей:
<a href="http://perishablepress.com">Jeff Starr</a>
<a href="http://davidwalsh.name">David Walsh</a>
<a href="http://accidentalninja.net/">Richard Felix</a>


Вы хотите сделать различные стили для каждой из ссылок. Традиционный способ — задать каждой ссылке имя класса, но это требует дополнительной разметки, что не всегда хорошо (для семантики и прочего). Другой способ — это использование :nth-child, но для этого потребуется неизменный порядок списка. В данном случае идеальным решением будет использование селекторов атрибутов… Ссылки уже имеют уникальные атрибуты.
a[href=http://perishablepress.com] { color: red; }

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

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

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


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

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

Помните, что классы и ID тоже являются атрибутами, и могут быть использованы селектором атрибута. Допустим вы пишете CSS для сайта в котором вы не можете контролировать разметку и разработчики сделали три дива:
<div id="post_1"></div>
<div id="post_two"></div>
<div id="third_post"></div>

Вы можете выбрать их все:
div[id*=post] { color: red; }


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


<h1 rel="external-link yep">Attribute Begins</h1>

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

Реальным примером использования может быть случай, когда вам нужно, что бы любая ссылка на сайт друга отличалась от других ссылок. Не важно это ссылка на главную страницу или внутреннюю, стиль должен быть одним.
a[href^=http://perishablepress.com] { color: red; }

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

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


Мы можем выбирать основываясь на начальном значении атрибута, почему бы не выбирать с конечного?
<h1 rel="friend external">Attribute Ends</h1>

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

Честно говоря, я изо всех сил пытаюсь найти реальный пример использования этого. К примеру вы можете найти ссылки имеющие в конце определенные символы.
a[href$=#], a[href$=?] { color: red; }


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


Вы наверняка знаете, что к элементу можно применять несколько классов. Если вы это сделаете, вы можете использовать .class-name в CSS для связи. В селекторе атрибута не все так просто. Если ваш атрибут имеет несколько значений (например список разделенный пробелами) вам прийдется использовать "~=".
<h1 rel="friend external sandwich">Attribute Space Separated</h1>

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

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

[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; }


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


Каждый приведенный выше пример работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE. Internet Explorer обладает превосходной поддержкой всего этого в 7 версии и нулевой поддержкой в 6 версии. Что бы протестировать в браузере — откройте тестовую страницу. Если строка/селектор красная — значит селектор работает.
Метки:
Поделиться публикацией
Комментарии 116
  • –17
    Вот к сожалению нулёвая поддержка всей этой красоты в IE6 заставляет любоваться ею только издалека.
    • +9
      Доля ie 6 стремительно снижается, так что думаю скоро можно будет пользоваться во всю ;)
      • +19
        Боюсь когда доля IE6 снизиться во всех корпоративных сегментах настолько, что её можно будет уже не учитывать данная технология CSS будет уже устаревшей.
      • –1
        в корее и других азиатских коммунистических странах доля IE6 стремится к 100%, к сожалению.
        Так что все зависит от того, на какую аудиторию расчитан проект.
        • +1
          По вашему Корея «коммунистическая страна»? Если вы конечно не про Северную Корею (но там и интернета очень мало и то с оговорками).

          А в Южной Корее, да, велика доля ie6 из-за былой большой популярности в безнес-секторе веба всяческих ActiveX приложений, которые даже в ie7 толком не работают.
          • –1
            Северная Корея да, там внутрення сетка в которой сидит большинство.
            Южная корея, Китай — многие сидят на IE6
            Хотя в китае тоже напряженка с инетом, но тем не менее участвовал я и в разработке проектов которые имели пару страниц на китайском.

            А, точно, еще ведь и про ActiveX забыл. Из за него даже знакомые в англии сидят на IE потому что у них внутренняя система документооборота реализована с ActiveX и переделывать особо не хотят да и времени нет.
            • 0
              >Если вы конечно не про Северную Корею
              Любимый руководитель товарищ Ким Чен Ир окончательно вычеркнул из Конституции и других официальных документов упоминание о коммунизме и прочих марксистских химерах. Государственной идеологией Северной Кореи объявляется «Сенгун» — принцип приоритета вооруженных сил и укрепления военной мощи.
              www.rbcdaily.ru/2009/09/30/focus/433742
              • –4
                ну я образно назвал их все коммунистическими :)
                • +1
                  Я просто о том, что Южная Корея ну никаким боком не коммунистическая и никогда ей не была.
                • –1
                  Тут даже не формальный признак важен, записано или нет, а по своей сути. Как была тоталитарным государством по примеру СССР образца 30-50-х годов, так и осталось.
            • –1
              Очень хорошо смотрится в ie6 сайт, когда оформление input происходит через rel.

              думаю проще сразу для всех браузеров добавить class, чем выделять ie отдельно
              • 0
              • +18
                «Нулёвая поддержка всей этой красоты в IE6» для меня означает, что только ~10% пользователей не увидят этой красоты.
                • +1
                  Вы смотрите по мировой составляющей или по какому-либо своему конкретному ресурсу?
                  Мировая доля 6-го ослика 10 с лишним процентов, а для некоторых ресурсов посетители с шестеркой доходят до 20% (для ресурса с посещаемостью около 1млн. в день это почти 200.000 человек). А есть и еще большие доли. Что предложите делать с этими пользователями, если большинство из них висит в госконторах и организациях, где им тупо не могут поставить нормальные браузеры?
                  • +2
                    На моих проектах их еще меньше — примерно 5%, что очень радует.
                    Персональную страницу я вообще закрыл для всех ІЕ ниже 8й версии (по идейным соображениям).

                    Если с умом использовать эти селекторы то пользователи ІЕ6 все равно смогут получить контент, хотя и без красивостей.
                    • +1
                      Рад за вас и ваших пользователей. =) Осталным разработчикам приходится терпеть.
                      • +8
                        Я думаю, человеку, пользующемуся IE6 не нужны никакие красивости.
                        • +1
                          Они могут даже не догадываться о современных «красивостях» на сайтах :)
                          • 0
                            Объясните твердолобому заказчику, почему он сидя в своем любимом браузере не может получить сайт как на картинке. В данном случае компромисс — единственное решение проблемы, если вам дороги ваши клиенты. Если же подход таков, что если у тебя браузер г… но — ты и сам г… но, тогда да, обеспечиваете доступ к контенту без всяких изысков и не паритесь. Каждый выбирает свою дорогу:)
                            • НЛО прилетело и опубликовало эту надпись здесь
                        • 0
                          Смотреть на мой сайт без красивостей. А что я им ещё могу предложить?
                          • +1
                            эм… контент?
                            • 0
                              Если я выкладываю контент, я рассчитываю, что его увидят все пользователи, у которых мой сайт вообще откроется.
                              Красивости я обещаю только тем, у кого они позволятся. Но контент — это святое :)
                              • 0
                                а, извините, я неправильно вас понял :)
                                я почему-то подумал что вы имеете в виду что кроме красивостей ничего не можете предложить, а вы оказывается наоборот предлагаете мол и фиг с ними красивостями главное показать контент
                        • +1
                          а почему только? для меня озвученная цифра это АЖ 10%
                          это 10% возможной прибыли, которую я смог бы получить не отказавшись от этих пользователей.
                          • +1
                            Расскажите о недополученной прибыли Google, а то они бедные и несчастные не в курсе, сколько денег потеряют на Youtube после 13 марта :)
                            • 0
                              Вы действительно уверены в том, что после 13 марта YouTube перестанет открываться и крутить видео в IE6?
                              • +2
                                С 13 марта для пользователей ІЕ6 будут недоступны некоторые новые функции YouTube, видео можно будет смотреть без проблем.
                                Точно также отсутствие поддержки стилей, описанных в этой статье, не означает недоступность сайта для ІЕ6.
                                • 0
                                  С 13 марта для пользователей ІЕ6 будут недоступны некоторые новые функции YouTube, видео можно будет смотреть без проблем.


                                  А как это связано с «недополученной прибылью Google, а то они бедные и несчастные не в курсе, сколько денег потеряют на Youtube после 13 марта», если подавляющее большинство пользователей даже самых последних версий браузеров ходят на YouTube только чтобы видео посмотреть?

                                  Точно также отсутствие поддержки стилей, описанных в этой статье, не означает недоступность сайта для ІЕ6.


                                  Смотря за что эти стили отвечают. Если за окраску текст в другой цвет — то да, если за расположение элементов — я бы поспорил.
                                  • 0
                                    1. ну вот maghamed выше пишет, что если он будет использовать функции, которые не работают в ІЕ6, то он не получит 10% возможной прибыли.
                                    2. если делать graceful degradation с умом (или хотя бы протестировать сайт в ІЕ6) — проблем быть не должно.
                                    • +2
                                      ну вот maghamed выше пишет, что если он будет использовать функции, которые не работают в ІЕ6, то он не получит 10% возможной прибыли.

                                      Если эти функции приведут к тому, что сайт не будет выполнять свои основные функции в IE6 (например, YouTube перестанет показывать видео в IE6) — то да, прибыль недополучит.
                                      • 0
                                        да, спасибо. Именно об этом я и говорил
                                        • 0
                                          Мысль относилась именно к затрагиванию основного функционала. Для ютуба, скажем, это показ видео.

                                          То что блоки полезут, это уже не столь критично
                                        • 0
                                          Ну у нас в компании, один из программистов на одном из проектов, просто поставил заглушку с призывом скачать «нормальный браузер» для пользователей с ИЕ6.
                                          При этом на этом сайте 20% пользователей с этим не нормальным браузером.

                                          + Сайт активно рекламируется в адвордсе.

                                          Итого 20% недополученной прибыли + какой-то процент бюджета адвордса (пользователи с ИЕ6 естественно в панике покидают сайт)
                                          • 0
                                            Покажите сайт, на котором каждый посетитель гарантированно приносит прибыль:) Очень бы хотелось увидеть:) Те, что покидают «в панике» маловероятно, что принесут хоть какую-то прибылЬ:)
                                            • 0
                                              ну, во-первых, это все сайты на которых висят баннера :-)

                                              Я думаю не стоит приводить ссылки этих сайтов, т.к. их очень много, гораздо больше чем тех, на которых их нет.

                                              Ну а если Вы про прибыль от продаж, то я тоже этого не говорил, что покупки совершает каждый. Покупатели распределены приблизительно равномерно по тому какие браузеры они используют. Поэтому и написал о 20% недополученой прибыли.

                                              Те кто покидают «в панике» — естественно ничего не принесут, т.к. пользователей, которые даже не видели контента сайта уже заставляют что-то делать. И естественно, никто (за очень редким исключением) этого делать не будет, т.к. в момент первого посещения лояльность к бренду (сайту) еще очень низка.
                                              • 0
                                                Баннер еще кликнуть надо:) Откуда теория, что приблизительно равномерно? Может они маргиналы:) Все зависит от нужности сайта, если человеку действительно нужна зубная щетка с фонариком, то он установит свежий браузер, а если нет — то смысл его нахождения:)
                                                • +1
                                                  Оплата производиться за баннеропоказы. Цены на беннера указываются за 1000 показов.

                                                  >Откуда теория, что приблизительно равномерно?

                                                  КО подсказывает, что в гугл аналитиксе можно настраивать цели.

                                                  >Все зависит от нужности сайта, если человеку действительно нужна зубная щетка с фонариком, то он установит свежий браузер, а если нет — то смысл его нахождения:)

                                                  Здесь все зависит от эластичности спроса и конкуренции на рынке. Лично я бы просто ушел с такого сайта. И перешел бы по следуйщей ссылки с выдачи гугла. Конкуренция на рынке очень высокая
                                  • +1
                                    ух, я отвлекся на работу. Извините, воремя не ответил :-) но пользователь, но вы сами написали в комментарии habrahabr.ru/blogs/css/85920/#comment_2571421, что основной функционал ютуба останется доступен для пользователей ИЕ6.

                                    А новые плюшки не будут поддерживаться. Но т.к. пользователи ИЕ6 изначально не стремяться пользоваться новыми плюшками, только потому, что пользуются ИЕ6. Поэтому зачем гуглу тратиться на финансирование разработки новых фитч, для сегмента, который ими не пользуется.

                                    Это экономия
                                  • 0
                                    по поводу прибыли могу сказать, что в наших магазинах последний заказ из под IE6 был чуть менее года(11 месяцев) назад.
                                • 0
                                  раньше меня самого перед использованием этих селекторов(да и не только этих) останавливал лишь 6-й осёл. но ситуация начинает меняться — Google с 1-го марта прекратил поддержку на 2-х своих проектах(Docs а второй не помню) и в течении года эта поддержка закончится на всех проектах, YouTube прекращает поддержку с 13-го марта. И думаю, что список крупных сайтов, которые проделают то же самое будет только увеличиваться.
                                  так что, думаю, можно опять начинать учиться верстать с использованием всех селекторов, представленных нам спецификацией CSS
                                  • +6
                                    Прекращение поддержки IE6 у Google означает, что не будут работать какие-то новые фичи, вводимые на сервисах, а не то, что сайт перестанет работать в IE6. То есть Google не забивает на шестого ослика, а все почему-то считают что это так и теперь можно под него не верстать. Хотя это конечно собственный выбор каждого.
                                    • +1
                                      ну так новые фичи в нём работать-то и не будут и в конечном итоге всё сведётся к тому, что в 6-м ослике лучше будет даже не открывать
                                      • 0
                                        Получается, что тот же Youtube в шестом ослике заморозится в том виде, в каком он находится сейчас. Не думаю, что сейчас Youtube лучше не открывать :)

                                        Хотя конечно, я очень надеюсь, что постоянно выскакивающая табличка с пожеланием сменить браузер и отсутствие новых фич все таки убьет IE6. И в наших силах помочь этому, вводя ограниченную поддержку IE6 на своих сервисах.
                                    • +1
                                      >раньше меня останавливал лишь 6-й осёл.
                                      >но ситуация начинает меняться — Google с 1-го марта прекратил поддержку
                                      Goggle, Facebook и хабраюзер Ashot, объявли о прекращении поддержки ie6 в своих проектах.
                                      Ура!
                                      • 0
                                        а я разве про себя что-нибудь говорил? я его до сих пор поддерживаю
                                    • +3
                                      Не согласен. Во-первых, никто не мешает испльзовать все это в личных, не коммерческих проектах, во-вторых любителей архаизма просто можно обделить всякими вкусностями без ущерба основной цели проекта. Наконец, от поддержки Ие 6 отказываются крупные монетизированные сервисы, что значительно приближает его конец.
                                      • 0
                                        Проблема в том, что такие красявости, как круголки в ie6 можно упростить до обычных прямоугольников.
                                        Но когда речь идёт о таких простых вещах, как, например. чересстрочная подсветка, тут упрощение для шестого может сказаться на удобстве пользования и пр.
                                        • 0
                                          Никто и не заставляет использовать это для каких-то ключевых вещей, дело ваше, чем жертвовать )
                                          • 0
                                            без черестрочной подсветки вполне можно обойтись
                                            • 0
                                              Если только это не помогает читать большие таблицы с данными
                                              • 0
                                                Ясно что помогает, но отсутствие чересстрочности не столь критичный недостаток (в отличие от, например, наехавшего блока на другой), и имхо не критичен, как не критично отсутствие многих других красивостей
                                      • –4
                                        статья интересная, не знал, что можно использовать рел.
                                        от ИЕ6 планирую отказаться на совсем… у кого он установлен… нууу… значит не повезло, и большенство таких пользователей пользы мне не принесут, поэтому с удовольствием буду использовать данную поддержку у себя в работах
                                        • 0
                                          нет разницы — rel, align или другой аттрибут.
                                          • 0
                                            та лана, пользователи ие впринципе и по сути неприхотливы (кроме корпоративных — там просто иногда мозг отсутствует), так что и без изысков обойдутся )))
                                          • 0
                                            <div id=«post_two»</div>
                                            угловая полетела
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                              • +14
                                                О сколько нам открытий чудных, готовит воскуренье манов… :)
                                                • +2
                                                  Хорошо оформленая статья, но все же содержание вряд ли кого сдесь удивит. Слишком уж для начинающих.
                                                  • –3
                                                    Для начинающих — да… но мне например очень интересно. по роду деятельности занимаюсь кодингом, а не дизайном и стилями… но иногда очень хочется понять — «а что-же имел в виду дизайнер», или «а как это он так изловчился, что оно работает»
                                                    Ну и самому уметь всякие фишки — тоже будет полезно.
                                                    Гран-мерси
                                                    • +1
                                                      вы имели в виду верстальщика а не дизайнера, наверное?
                                                      В хороших конторах обычно верстает все-таки не дизайнер, это не его работа.
                                                      А если верстальщик знает всякие «фишки» и умеет как-то «изловчатся» что не сразу «понятно, как оно работает» то врядли он будет работать в плохой конторе, которая будет его заставлять рисовать дизайн
                                                      • 0
                                                        Да, конечно имел в виду верстальщика. Неверно выразился.
                                                  • +6
                                                    В принципе, ничего нового. Но, как было написано выше, не юзаю из-за отсутствия поддержки в 6 осле, т.к. верстаю только коммерческие проекты (хотя одна из студий, где беру работу, постепенно отказывается от него, что не может не радовать).
                                                    • –4
                                                      Спасибо, хорошая статья.
                                                      • 0
                                                        Освежило память)
                                                        • +2
                                                          Очень полезно использовать селекторы для верстки обтекания изображений.
                                                          img[align=left]{margin-right: 5px;}, например.
                                                          И да, всё-таки не тире, а дефисы, исправьте.
                                                          • +1
                                                            Разве атрибут align не запрещен в xhtml? Да и вроде бы он не для обтекания совсем…
                                                            • 0
                                                              Вне зависимости от того, запрещен или нет, если пользователям можно добавлять картинки в тексты на сайте, они часто просто ставят атрибут align в WYSIWYG-редакторе, а об отступах, естественно, редко заботятся. Для подобных ситуаций использую такую конструкцию.
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                • +1
                                                                  и свои дописки к дтд, если всё-таки очень хочется )))
                                                                  Доктайпы — всего лишь w3c recommendation, советы, но никак не законы. С ними можно и не соглашаться )
                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                    • 0
                                                                      С тагетами будут соглашаться вроде как, про html'ные align'ы ничего говрить не буду: не использую очень давно. А в чём именно будет проявляться несогласие с тагетами?
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                          • 0
                                                                            В стрикте-то его нет, но если объявить страницу в стрикт-доктайпе и плюс дописать свой кусочек дтд, где он описан, то работать должно. Хотя даже придумать не могу, зачем именно в данном конкретном случае так нужно было бы извращаться, но сама возможность есть.
                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                • +9
                                                                  Извините, а что такого этот Chris Coyier открыл? По сути пост — пересказ спецификации CSS.
                                                                  Как люди должны это использовать, когда доля шестого ие так высока?
                                                                  Смысла нет)
                                                                  • –1
                                                                    По мне так все просто. Делается унифицированая работоспособная версия для всех используемых ан данный момент браузеров, потом докручивается за счет подобных приемов. Альтернатива, как мне видится только не использовать подобные возможности, тоесть остановится на этапе разработки унифицированной версии которая и будет отображатся во всех браузерах, а не только в тех, которые не поддерживают такой возможности.
                                                                    • +1
                                                                      ИМХО, graceful degradation должна касаться всякой фигни типа теней и круголков, а то, что предлагается делать через a[b=c], может иметь значение. С точки зрения оформления контента
                                                                      • 0
                                                                        Ну, сугубо мой взгляд на проблему, любое оформление контента, не несущее в себе необходимости, не только ненужно, но и вредит коммуникации (так как оформление так же является частью информации, а ненужная информация препятствует потреблению нужной).

                                                                        Из пречисленных же здесь примеров (разьве, что за исключением верски элементов форм, но это и без учета того отдельная песня), я нивижу ни одного не укладывающегося в принцип graceful degradation (не люблю я использовать иностранные термины, но удачный общепринятый аналог мне не известен).
                                                                  • +8
                                                                    Давайте тогда уж просто постить главы из «CSS-каскадные таблицы стилей. Подробное руководство». Я понимаю, что «это многим неизвестно», но разве это повод публиковать то, что можно найти в любом учебнике?
                                                                  • +5
                                                                    >
                                                                    [rel$=external] — Атрибут оканчивается определенным значением
                                                                    Честно говоря, я изо всех сил пытаюсь найти реальный пример использования этого. К примеру вы можете найти ссылки имеющие в конце определенные символы.

                                                                    !
                                                                    Реальным примером служат ссылки на орпеделенный тип файлов, когда нужно их различное оформление (обычно чтобы выводить перед ними иконку этого типа файлов, вроде пдф, документ ворд, архив и прочее).
                                                                    • 0
                                                                      Я тоже об этом подумал. Но решил оставить оригинальный текст (перевод)
                                                                      • 0
                                                                        можно добавить «комментарий переводчика»
                                                                    • 0
                                                                      Подскажите, толком не пробовал проверить — использовать REL в разных элементах с точки зрения валидности кода как?

                                                                      Можно ли его засовывать в любой элемент вообще?

                                                                      Спасибо.
                                                                      • +2
                                                                        Вот автор прочитал спецификацию CSS и написал сей пост. Теперь вы можете прочитать спецификацию HTML и узнать про REL и другие прекрасные атрибуты и как их можно использовать
                                                                        • –1
                                                                          Спасибо! Невероятно мудрый ответ.
                                                                        • +1
                                                                          www.w3schools.com/tags/att_a_rel.asp
                                                                          www.w3.org/TR/html401/struct/links.html#h-12.1.2

                                                                          Коротко — можете использовать для ссылок [a] и [link].
                                                                        • 0
                                                                          отдельное спасибо разработчикам jQuery,
                                                                          благодаря которым я узнал об этих возможностях уже давно
                                                                          • –1
                                                                            Единственные реально выгодные фичи всего этого — это возможность выбирать инпуты по type и ссылки на внешние ресурсы. Больше практической пользы не вижу. А статья – пересказ спецификации, если вы этого не знали, то это вообще…
                                                                            • +1
                                                                              ну-ну, вот у меня заказчик просит поправить сайт на джумле, мне в шаблон ну совсем не охото лезть, а задача то всего сделать ссылку особым цветом и… some magic… и все работает )))
                                                                              • +2
                                                                                Главное, чтобы заказчик не через IE6 смотрел на выполненную работу ;)
                                                                            • –3
                                                                              вообще-то шикарно, некоторые вещи просто гигантски упрощают мне жизнь
                                                                              автору спасибо за материал, и просьба сразу если вы это нашли в документации по цсс — дайте линк на это чудо )))
                                                                            • –1
                                                                              Мне статья очень пригодилась. Написано популярно, разжевано как следует и разложено по тарелочкам.
                                                                              Даже немного удивлен, что за годы работы никогда с такими методами не сталкивался.
                                                                              • +1
                                                                                Для начала по спецификации HTML у тэга H2 нет атрибута rel. А вообще для составление css-селектора такого рода можно использовать любые атрибуты. Фича упирается в кроссбраузерность.
                                                                                • +4
                                                                                  Тонкости??? Это ж специфификация CSS 2.1. Тонкости, это когда говорят, что будет быстрее обрабатываться браузером: селектор по id или по class, например. А это база. Я не прав?
                                                                                  • 0
                                                                                    ну для когото и тонкости… а для когото и обычности… кто юзает часто jquery меня поймет…
                                                                                    да и вообще эти селекторы прекрасно задокументированы и в css и в jquery
                                                                                    • 0
                                                                                      Не знал. Добавил и избранное. Офигенно. Особенно решает проблему с инпутами. Постоянно мучился.
                                                                                      А что касается юзверей IE6, так плевать на них. У меня свои методы решения проблем с ними.
                                                                                      • 0
                                                                                        чувствую себя тупым, но я не очень понял, как этим пользоваться
                                                                                        не очень наглядно
                                                                                        • +1
                                                                                          А почему бы просто не расширить поддержку селекторов и для IE6, а не рассуждать умер он или все-таки еще жив…
                                                                                          • 0
                                                                                            этой фичей прикольно метить ссылки на внешнии сайты. Например, значек хаброюзера если ссылка на профиль на хабре, значек вики если ссылка на вики.
                                                                                            • 0
                                                                                              Использовал некоторые вещи в последних двух проектах. Просто приятно было верстать без поддержки ИЕ6. Правда я осознал, что многие вещи (кнопки, попапы, ресет) нужно перерабатывать, если поддержка ИЕ6 не нужна, но это к теме уже не относится.
                                                                                              • 0
                                                                                                Похоже, что эти селекторы атрибутов не дружат с точками, слешами и возможно прочими знаками.
                                                                                                У меня не заработала конструкция типа: a[href=link/1] { color: red; } и a[href=link.2] { color: red; }
                                                                                                • +1
                                                                                                  а в кавычки брать не учили подобные конструкции?
                                                                                                  • 0
                                                                                                    Ни в одном из примеров кавычек нет.
                                                                                                    • 0
                                                                                                      Спасибо за подсказку, разобрался. С кавычками работает: a[href=«link/1»] { color: red; } и a[href=«link.2»] { color: red; }
                                                                                                      • 0
                                                                                                        UPD: Сори, кавычки неправильные получились.
                                                                                                  • 0
                                                                                                    >>>пользователи ие по сути неприхотливы (кроме корпоративных — там просто иногда мозг отсутствует) и могут даже не догадываться о современных «красивостях» на сайтах, так что и без изысков обойдутся )))
                                                                                                    Пользователи ие могут даже и не подозревать, что смотрят интернет через какую-то определённую программу, ведь в пуске ссылка на ie называется «Интернет»! (Кстати, это очень хитро, молодец, микрософьт))
                                                                                                    • 0
                                                                                                      *имеется ввиду меню Пуск в каких-то версиях XP
                                                                                                    • 0
                                                                                                      Спасибо за статью, добавил в закладки)
                                                                                                      • 0
                                                                                                        Выше уже упоминалась книга «CSS-каскадные таблицы стилей. Подробное руководство».
                                                                                                        Рекомендую ее к прочтению всем кто считает себя профессиональными верстаками (для новичков она будет слишком мутной).
                                                                                                        В книге рассказано все что вообще можно знать про css, очень последовательно и подробно.
                                                                                                        После ее прочтения вряд ли можно будет узнать что-то новое из подобных статей в ближайший год-неско :)

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