Есть ли селектор CSS по префиксу класса?

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

Например. Мне нужно правило, которое будет применяться к div, у которого есть класс, начинающийся с status- (A и C, но не B в следующем фрагменте):

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

Какая-то комбинация:
div[class|=status] и div[class~=status-]

Возможно ли это в CSS 2.1? Возможно ли это в соответствии с какой-либо спецификацией CSS?

Примечание: я знаю, что могу использовать jQuery для подражания этому.


css css-selectors
person THX-1138    schedule 26.07.2010    source источник

Ответы (4)


arrow_upward
420
arrow_downward

Это невозможно с CSS2.1, но возможно с помощью селекторов сопоставления подстрок атрибутов CSS3 (которые поддерживаются в IE7 +):

div[class^="status-"], div[class*=" status-"]

Обратите внимание на пробел во втором селекторе атрибутов. Это подбирает div элементов, атрибут class которых удовлетворяет любому из этих условий:

  • [class^="status-"] - начинается со "status-"

  • [class*=" status-"] - содержит подстроку «статус-», стоящую сразу после символа пробела. Имена классов разделяются пробелом в соответствии со спецификацией HTML, следовательно, значительный пробел персонаж. Это проверяет любые другие классы после первого, если указано несколько классов, и добавляет бонус проверки первого класса в случае, если значение атрибута заполнено пробелами (что может произойти с некоторыми приложениями, которые выводят атрибуты class динамически).

Естественно, это также работает в jQuery, как показано здесь.

Причина, по которой вам необходимо объединить два селектора атрибутов, как описано выше, заключается в том, что селектор атрибутов, такой как [class*="status-"], будет соответствовать следующему элементу, что может быть нежелательным:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

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

Если у вас есть контроль над источником HTML или приложением, генерирующим разметку, может быть проще просто сделать префикс status- своим собственным классом status вместо как предлагает Гамбо.

person BoltClock    schedule 21.12.2011
comment
Если по какой-то странной причине у вас есть класс с именем status- и вы не хотите ему соответствовать, селектор становится еще более сложным: div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-) Плюс вы теряете поддержку IE7 / IE8. К счастью, если у вас нормальная разметка, вам не нужно исключать такой класс. - person BoltClock; 16.10.2012
comment
Что в этом плохого: [class*=" anim-overlay-"] a:hover:after{...}. Мои классы CSS anim-overlay-1, _3 _..... anim-overlay-8 - person M B Parvez Rony; 20.07.2016
comment
@WebDevRon: Вы забыли часть ^ =. Если ваш атрибут класса гарантированно начинается с anim-overlay - тогда вам, вероятно, не нужна часть * =. - person BoltClock; 21.07.2016
comment
Спасибо. Другое дело, могу я использовать это .anim-overlay-*{...}? - person M B Parvez Rony; 21.07.2016
comment
@WebDevRon: Вам не кажется, что я бы предложил это в своем ответе, если бы он был таким простым, а не замысловатым решением, на которое вы смотрите? - person BoltClock; 21.07.2016
comment
@ Дэниел Комптон: Спасибо за редактирование. Оглядываясь назад, я осознал, что подобные слова могут быть снисходительными по отношению к тем, для кого что-то может быть не столь очевидным. Я знаю, что некоторые люди действительно не ценят такого рода перемены, поэтому я отвечаю в основном для того, чтобы вы знали, что ценю. - person BoltClock; 19.11.2018
comment
Согласно предоставленной вами ссылке на спецификацию HTML, имена классов могут быть разделены любым пробелами ASCII, включая, например, табуляции и разрывы строк. Так, например, если в HTML-документе есть class="fooTABstatus-important" или class="fooNEWLINEstatus-important", будет ли селектор соответствовать этому классу? Говорит ли спецификация CSS, что пробел в селекторе будет соответствовать любому пробелу или только буквальному символу пробела? Если он соответствует только буквальному пробелу, этот селектор не всегда будет работать. - person Garret Wilson; 17.12.2019
comment
@Garret Wilson: Ваша интуиция верна; этот селектор не учитывает другие типы пробелов. Чрезвычайно утомительно и огромная трата байтов - повторять этот селектор для всех возможных пробельных символов, с остальными из которых вы почти никогда не встретитесь более одного раза за всю свою карьеру или всю жизнь. Если известно, что приложение выводит атрибуты класса с новой строкой, вкладками, фидами форм или чем-то еще, или любой их комбинацией, вам придется это учитывать. Если известно, что это не так, то он настолько надежен, насколько вам реально потребуется. - person BoltClock; 17.12.2019
comment
Хорошо, но ответ говорит не об этом. В информатике очень большая разница между тем, что работает, и тем, что работает большую часть времени. Ответ заставляет думать, что это соответствующее правило соответствия селектора CSS, когда это не так. На мой взгляд, вы можете столкнуться с большими проблемами, сказав, что он работал с данными, на которых я его тестировал, хотя он не охватывает варианты спецификации. Это та же опасность, что и синтаксический анализ XML с помощью регулярных выражений, а не анализатора XML. По крайней мере, для ответа требуется отказ от ответственности, который является эвристическим, не охватывающим все возможности. - person Garret Wilson; 17.12.2019
comment
@Garret Wilson: Честный компромисс. Имейте в виду, я знаком с тем, что вы сказали (хотя я никогда не принимал CS), и я стал более усердно высказывать как можно больше предостережений и более осторожно добавлять отказы от ответственности к своим ответам в недавнем лет - это было почти 8 лет назад, и у меня, как правило, не хватает сил вносить более чем незначительные изменения в старые ответы, если это не очень важно. Раньше я специально оставлял самые крайние крайние случаи, потому что не хотел превращать 3 абзаца в 10, а остальные оказывались неактуальными для 90% читателей и 99% реальных сценариев. - person BoltClock; 17.12.2019

arrow_upward
17
arrow_downward

Селекторы атрибутов CSS позволят вам проверять атрибуты для строки. (в данном случае - имя класса)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

(похоже, что он на самом деле находится в статусе «рекомендация» для 2.1 и 3)


Вот схема того, как я * думаю, это работает:

  • [ ]: это контейнер для сложных селекторов если хотите ...
  • class: 'class' - это атрибут, на который вы смотрите в данном случае.
  • *: модификатор (если есть): в данном случае «подстановочный знак» означает, что вы ищете ЛЮБОЕ совпадение.
  • test-: значение (при наличии одного) атрибута, содержащего строку "test-" (которая может быть чем угодно)

Так, например:

[class*='test-'] {
  color: red;
}

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

ul[class*='test-'] > li { ... }

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

пример: http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

Все, что выше IE6, с радостью подчинится. :)

Обратите внимание, что:

[class] { ... }

Подберет что угодно с классом ...

person sheriffderek    schedule 11.09.2015
comment
[class*='test-'] будет соответствовать таким элементам, как <div class='foo-test-bar'>. Это единственный крайний случай, который требует объединения ^ и *, как описано в моем ответе. И IE6 не поддерживает селекторы атрибутов. - person BoltClock; 18.09.2015
comment
@BoltClock - спасибо за разъяснения! - Я не поддерживаю ‹EI9 - и я бы никогда не стал писать классы, которые будут наступать друг на друга - так что для меня это работает. :) - person sheriffderek; 18.09.2015

arrow_upward
6
arrow_downward

Это невозможно с селекторами CSS. Но вы можете использовать два класса вместо одного, например status и important вместо status-important.

person Gumbo    schedule 26.07.2010
comment
Хорошая идея разделить его на отдельный класс, но это возможно с помощью селекторов CSS. Смотрите мой ответ. - person BoltClock; 21.12.2011

arrow_upward
2
arrow_downward

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

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

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

person SBUJOLD    schedule 26.07.2010
comment
да, подумал об этом. Это может стать проблемой при появлении jQuery, поскольку он может вставить класс впереди. - person THX-1138; 27.07.2010
comment
Да, я отредактирую свой пост, чтобы прояснить, что это явно не рекомендуемый способ. Если у вас есть контроль над именами классов, то предложение Gumbo определенно будет подходящим вариантом (плюс селекторы атрибутов в старых браузерах IE не поддерживаются). - person SBUJOLD; 27.07.2010