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,…
  • How to limit the character count of the paragraph text

    October 8, 2022
    Instead of showing the whole text paragraph from the post entry, here is how you can limit the character count.…
  • Font Smoothing

    October 7, 2022
    Here is how to get smooth like butter font on your websites.