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