css selector data-key code example

Example 1: select element by data

If you're talking aabout the inner content of an element, this is impossible with CSS3.
However, you can use this for the data attributes of an element:

    div [data-value="foo"] {
          display: block;
    }

- GameGlitz

Example 2: css data attribute selector

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

Tags:

Css Example