Css class id rel

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

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

Существует множество вариантов их использования. Давайте разберёмся более детально с различными опциями и попытаемся придумать сценарии использования атрибутов в реальной жизни.

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

В приведённом выше примере, атрибут элемента h2 был равен «friend». Селектор, который мы написали ссылался на него, поскольку значение атрибута точно равно «friend». Именно точное. Давайте посмотрим на другой пример:

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

Jeff Starr David Walsh Richard Felix

И вы хотите задать каждой ссылке свой стиль. Традиционный подход состоит в том, что каждой ссылке указывается класс, но этот подход требует дополнительной разметки. Другой способ — это использование псевдоселектора nth-child. Однако этот подход требует определённого порядка элементов. Эта проблема идеально подходит для применения селекторов по атрибутам, поскольку ссылки уже являются уникальными.

a[href=http://perishablepress.com]

Я уверен, что наиболее часто этот тип селектора используется для элементов input (text, radio и т.п.). Все эти элементы сильно отличаются друг от друга, и писать что-нибудь типа input в большинстве случаев не лучшая идея. Гораздо чаще используется следующая запись:

input[type=text] < padding: 3px; >input[type=radio]

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

[rel *= external]
Атрибут содержит заданное значение.

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

Не забывайте, что идентификаторы и классы — это тоже атрибуты и вы можете их в селекторах по атрибутам. Итак, давайте предположим, что вы пишете CSS для сайта, в котором вы не имеете доступа к разметке, а неопытный разработчик оставил вам такое:

Вы можете подсветить все эти элементы следующим образом:

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

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

a[href^=http://perishablepress.com]

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

Если есть возможность сделать выбор по началу значения атрибута, то почему не быть и обратной возможности?

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

[rel ~= external]
Атрибут находится в списке, разделённом пробелами

Как вы уже знаете, вы можете указать несколько классов стилей для одного элемента. И если вы делаете именно так, то вы можете использовать имя класса для доступа к элементу в CSS. В случае использования селекторов по атрибуту, не всё так просто. Если атрибуту rel присвоено несколько значений (разделённых пробелами), то вам необходимо использовать «~=»;

Attribute Space Separated

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

[rel |= external]
Атрибут находится в списке, разделённом дефисами

Список, разделённый дефисами очень похож на описанный выше список разделённый пробелами. Но опять же есть свои особенности перед использованием селектора с «*=».

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

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

h1[rel=handsome][title^=Important]

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

Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник