Могу ли я изменить значение встроенного атрибута данных (data-parallax) с помощью css?

Question

На сайте Wordpress я хочу отключить эффект параллакса темы для определенных страниц. Я не уверен, какая библиотека используется, и я бы предпочел попробовать это через CSS. Код:

<div id="primary" class=" page-header header-small" data-parallax="active" style="transform: translate3d(0px, 0px, 0px);">...</div>

Таким образом, я думаю, что я смогу нацелить «активный» так же, как вы переопределяете встроенный [стиль]:

.page-child #primary[data-parallax] {
content:'none';
}

Это не сработало, поэтому я выбрал более простой

.page-child #primary[style] {
transform: none;
}

Мой вопрос на будущее - существует ли способ CSS для нацеливания значений данных?

Answer 1

Чтобы указать элемент div с атрибутом data-parallax, для которого установлено значение "active", и отключить преобразование translate3d, используйте следующий код:

[data-parallax="active"] {
  transform: translate3d(0);
}

---

Чтобы ответить на вашвопрос, как правило, это доступные селекторы атрибутов, которые можно использовать для нацеливания на элемент:

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

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

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

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

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

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

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

Answer 2

Ответ да

Css дал нам возможность манипулировать CSS на основе значения, присвоенного атрибуту data.С этим, как говорится.Вот пример, который вы могли бы использовать для достижения этой цели.

[data-parallax="foo"] //Where value is exactly foo