Виберіть елементи за атрибутом даних у CSS

488

Чи можливо вибрати елементи в CSS за їх атрибутами даних HTML5 (наприклад, data-role)?

776

Якщо ви маєте на увазі використання селектора атрибутів , переконайтесь, чому б ні:

[data-role="page"] {
    /* Styles */
}

Існує безліч селекторів атрибутів, які ви можете використовувати для різних сценаріїв, які містяться в документі, на який я посилаюся. Зауважте, що, незважаючи на те, що атрибути спеціальних даних є "новою функцією HTML5",

у веб-переглядачах зазвичай не виникає проблем із підтримкою нестандартних атрибутів, тому ви повинні мати можливість фільтрувати їх за допомогою селекторів атрибутів; і
Вам також не доведеться турбуватися про перевірку CSS, оскільки CSS не піклується про неіменні назви атрибутів, доки вони не порушують синтаксис селектора.

— BoltClock
джерело

4

Чи сумісний він з усім навігатором?

— Крістоф Вище

21

@Christophe вище: IE7 + та все інше.

— BoltClock

7

CSS, схоже, не визначає цього, якщо атрибут даних встановлений або змінений через JS.

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

30

Після подальшого дослідження, схоже, $("#element").data("field","value");це не змінює значення атрибутів даних, воно лише змінює кешовану версію домену DQ jQuery. Для зміни фактичного атрибута DOM потрібно використовувати $("#element").attr("data-field","value");. Недійсність мого оригінального коментаря.

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

2

Так, схоже, що зміна набору даних працює також @Matthew - jsfiddle.net/BoltClock/k378xgj3 Дякую за нічого jQuery.

— BoltClock

107

Також можна вибрати атрибути незалежно від їх вмісту в сучасних браузерах

з:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

Наприклад: http://codepen.io/jasonm23/pen/fADnu

Працює над дуже значним відсотком браузерів.

Зверніть увагу, це також може бути використане у селекторі JQuery або у використанні document.querySelector

— окудо
джерело

Нічого собі, я ніколи не бачив, щоб це можна було використовувати так !! +1! І FWIW, коли термін дії веб-переглядачів закінчився, я вважаю, що він працює в IE7 +, тому його підтримка майже всюди присутня. Забавно , що навіть Кріс Coyier згадав про це тут

— Каміло Martin

Дякую @CamiloMartin, я видалив посилання браузера, щоб уникнути плутанини / роздратування.

— окудо

Додано посилання на тему Кріса Коєра css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin

— ocodo

1

Жоден з цих синтаксисів все одно не є новим - більше людей були здивовані, що IE6 не підтримує його, ніж IE7 +. Ви можете припустити, що всі селектори CSS2.1 підтримуються в IE8 та пізніших версіях - IE7 робить більшість, хоча і з кількома незрозумілими помилками. Усі сучасні веб-переглядачі деякий час підтримували селектори 3 рівня , а Chrome замість цього баггі.

— BoltClock

1

Так як ми знаходимося на тему селектор атрибутів , хоча, цікаво відзначити , що подстроки атрибутів селектори , які були введені на рівні 3 ( ^=, *=і $=) також підтримуються IE7 і IE8. Можливо, вони були введені в IE до стандартизації.

— BoltClock

47

Варто відзначити селектори атрибутів підрядків CSS3

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

— Матас Вайткевічус
джерело

13

Ви можете комбінувати декілька селекторів, і це так здорово, знаючи, що ви можете вибрати кожен атрибут та атрибут на основі їх значення, як-от hrefна основі їх значень лише з CSS.

Атрибути селектори дозволяє погратися з деякими додатковими idі classатрибути

Ось дивовижне читання на селекторах атрибутів

Скрипка

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

Розгорніть фрагмент

Підтримка веб-переглядача:
IE6 +, Chrome, Firefox та Safari

Ви можете перевірити деталі тут .

— Аамір Шахзад
джерело

4

    [data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

— Голий хан
джерело