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

Question

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

583 4

css css-selectors

4 ответов:

Comments

Ничего не найдено.

BoltClock · Accepted Answer · 2017-05-23 15:10:05

это не выполнимо с CSS2. 1, но это возможно с CSS3 атрибут подстрок-соответствующие селекторы (который are поддерживается в IE7+):
div[class^="status-"], div[class*=" status-"]
обратите внимание на пробел во втором селекторе атрибутов. Это поднимает div элементы которого class атрибут соответствует любому из этих условий:

[class^="status-"] - начинается с "статус" (очевидно).

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

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

причина, по которой вам нужно объединить два селектора атрибутов, как описано выше, заключается в том, что селектор атрибутов, такой как [class*="status-"] будет соответствовать следующий элемент, который может быть нежелательным:
<div id='D' class='foo-class foo-status-bar bar-class'></div>
если вы можете гарантировать, что такой сценарий будет никогда бывает, тогда вы вольны использовать такой селектор для простоты. Однако комбинация выше намного больше крепкий.

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

sheriffderek · Accepted Answer · 2017-07-08 04:38:29

селекторы атрибутов 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] { ... }

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

Gumbo · Accepted Answer · 2010-07-26 23:23:45

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

SBUJOLD · Accepted Answer · 2010-07-27 00:22:32

вы не можете этого нет. Есть один селектор атрибута, что соответствует или частично до знака, но он не будет работать здесь, потому что у вас есть несколько атрибутов. Если имя класса, которое вы ищете, всегда будет первым, вы можете сделать это:
<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 может манипулировать атрибут.