Есть ли селектор 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 для эмуляции этого.

4 ответов


это не выполнимо с CSS2.1, но это возможно с CSS3 атрибутов подстроки-соответствующие селекторы (которые are поддерживается в 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- префикс свой собственный класс как предлагает Гамбо.


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

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

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


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

  • [ ]: является контейнером для сложных селекторов если вы будете...
  • 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] { ... }

будет выбрать что-нибудь с классом...


Это невозможно с селекторами CSS. Но вы можете использовать два класса вместо одного, например,статус и важно вместо информация-важный.


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

<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 может манипулировать атрибут.