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

Ответы

Ответ 1

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

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

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

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

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

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

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

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

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

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

Ответ 2

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

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

example: http://codepen.io/sheriffderek/pen/MaaBwp

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

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

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

[class] { ... }

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

Ответ 3

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

Ответ 4

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

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