Есть ли селектор CSS по префиксу класса? - PullRequest
Новая
       2

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

149 голосов
/ 27 июля 2010

Я хочу применить правило 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 ]

317 голосов
/ 21 декабря 2011

Это невозможно с помощью 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 как предполагает Гамбо .

10 голосов
/ 11 сентября 2015

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

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

6 голосов
/ 27 июля 2010

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

2 голосов
/ 27 июля 2010

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...