CSS selector with data attribute

[css] selector [attributes=”—”], data attributes

with data attribute

div[data-your-name="tio"] {

}

with javascript dom manipulation

const dom = document.querySelector('div.test[data-id="100"]');

General usage

[class="(╯°□°）╯︵ ┻━┻"]{
  color: red;
  font-weight: bold;
}

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