Css multiple attribute selectors

Multiple Attribute Values

Class names are unique in the ability outlined above. Other attributes are not treated as “multiple values” just because they have a space in them. For instance:

This element just has a data-type attribute with a value of “module accordion expand”, not three unique values “module”, “accordion” and “expand”. But let’s say we wanted to be able to select elements based on individual values like we can with class names. We could do it by using a “*” substring matching attribute selector which will match if the provided string appears anywhere in the value:

[data-type*="accordion"][data-type*="expand"]

Ever better, use the whitespace separated selector (e.g. [data-type~=»expand»] ). That way you won’t get burned by something like “expand” matching “expander” when you didn’t want to.

[data-type~="accordion"][data-type~="expand"]

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

Would you personally ever use this in one of your sites, Chris? I can see combining data attributes with JavaScript, but making CSS selectors for data attributes seems odd. It would have to be something generic to some extent and would be, in my point of view, easily implementable as a class. It’s also a lot more trustworthy since the compatibility for CSS classes and even multiple classes in the same selector go back way farther than the data attribute. Knowing you, doing all sorts of over-the-edge frontier development, there might be a special reason for doing this. I just can’t read that anywhere in your article. Wanna enlighten us?

I tried to write this article three or four times. The origin of it was that I was trying to figure out what the use of the dash-separated attribute selector was, e.g. [rel|=value]. Seemed rather useless, especially since it will only match an attribute that STARTS with “value-“. That means [rel^=value] is just as useful. I literally couldn’t come up with a single use case for it. I thought of how it might be useful to use classes like “module-a” and “module-b” on elements and be able to select them both together and separate.

[class|=module] < /* shared characteristics */ >.module-a < /* unique characteristics */ >.module-b < /* unique characteristics */ >

But again, that’s not particularly useful. Especially since if you use multiple classes (e.g. module-a”) you’ll get deeper browser support. Then I got thinking about classes and how unique it is that just by space separating them it’s kinda like having multiple unique values and how it’s the only attribute like that. So then the ideas kinda melted together and thus, this article. Would I use this in a real project? Sure. To be perfectly honest I never have but I would if it came up. A use case would be where you were using a data attribute to store some data anyway. Like let’s say geographical coordinates in a data-geo attribute. And you offered geographical search on the page. You could write a selector that would match elements based on the data-geo attribute without having to add some extra arbitrary hook to select by.

The “dash-separated attribute selector” is specifically designed for use in language attributes. The idea is to match things like en, en-US, en-GB etc.

Источник

Тонкости использования селекторов аттрибутов в 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 версии. Что бы протестировать в браузере — откройте тестовую страницу. Если строка/селектор красная — значит селектор работает.

Источник