Чи є селектор CSS за префіксом класу?

175

Я хочу застосувати правило 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 для емуляції цього.

css css-selectors

— THX-1138
джерело

373

Це не здійснимо з CSS2.1, але можна з атрибутом CSS3 подстрока зіставлення селектор (які будуть підтримуватися в IE7 +):

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

Помітьте пробільний символ у другому селекторі атрибутів. Тут вибираються divелементи, classатрибут яких відповідає будь-якій з цих умов:

[class^="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 .

— BoltClock
джерело

1

Якщо з будь-якої дивної причини у вас викликається клас, status-і ви не хочете відповідати цьому, селектор стає ще складнішим: div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-)плюс ви втрачаєте підтримку IE7 / IE8. На щастя, якщо ваша розмітка є здоровою, вам не потрібно буде виключати такий клас.

— BoltClock

Що сталося з цим: [class*=" anim-overlay-"] a:hover:after{...}. Мої заняття CSS anim-overlay-1, anim-overlay-2.....anim-overlay-8

— MB Parvez Rony

2

@WebDevRon: Ви забули ^ = частину. Якщо ваш атрибут класу гарантовано починається з анімації-перекриття, то, ймовірно, не потрібна частина * =.

— BoltClock

Дякую. Інша річ, чи можу я цим скористатися .anim-overlay-*{...}?

— МБ Парвес Роні

2

@Daniel Compton: Дякую за редагування Мені стало відомо про те, як подібні слова можуть бути поблажливими для когось, для кого щось може бути не таким очевидним. Я знаю, що деякі люди дійсно не цінують подібні зміни, тому я в основному відповідаю, щоб повідомити вам, що я роблю.

— BoltClock

14

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

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] { ... }

Вибере щось із класом ...

— шерифдерек
джерело

[class*='test-']відповідатиме таким елементам, як <div class='foo-test-bar'>. Це один крайній випадок, який вимагає поєднання ^ і *, як описано в моїй відповіді. І IE6 не підтримує селектори атрибутів.

— BoltClock

@BoltClock - дякую за уточнення! - Я не підтримую <EI9 - і я б ніколи не писав жодних класів, які б наступали один на одного, - тому для мене це працює. :)

— sheriffderek

6

Це неможливо з селекторами CSS. Але ви можете використовувати два класи замість одного, наприклад, статус і важливий замість важливих для статусу .

— Гамбо
джерело

14

Гарна ідея про відокремлення його в свій клас, але це можливо з CSS селекторами. Дивіться мою відповідь.

— BoltClock

2

Ви не можете цього зробити ні. Є один селектор атрибутів, який відповідає точно або частково до знаку a, але він не працює тут, оскільки у вас є кілька атрибутів. Якщо назва класу, який ви шукаєте, завжди буде першим, ви можете зробити це:

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

— SBUJOLD
джерело

2

так, подумав про це. Це може стати проблемою, коли jQuery потрапляє в картину, оскільки він може вставити клас спереду.

— THX-1138,

Так, я відредагую свою публікацію, щоб було зрозуміло, що це не є рекомендованим способом. Якщо у вас є контроль над іменами класів, то пропозиція Gumbo, безумовно, була б шляхом (плюс селектори атрибутів у старих браузерах IE не підтримуються).

— SBUJOLD