How to style data-value attributes with CSS

Here is a great way to style any data-attributes using CSS properties.

Here is the article source courtesy of CCS-Tricks.

[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 */
}

Man looking at a laptop screen coding CSS

Leave the first comment

Related posts

  • CSS reset basic

    October 6, 2022
    Here is a stripped-down CSS reset code to start the front-end HTML layout. This is just for quick development; otherwise,…
  • Prevent overscroll browser behavior

    October 8, 2022
    This CSS snippet prevents that annoying over-scrolling behavior in the browser.
  • Quick CSS variable setup

    October 6, 2022
    Here is an example CSS code snippet to setup CSS variables. Expand as you wish.