data attribute css

1a[href="https://css-tricks.com"] {
2  color: #E18728;
3}
4
5[data-value] {
6  /* Attribute exists */
7}
8
9[data-value="foo"] {
10  /* Attribute has this exact value */
11}
12
13[data-value*="foo"] {
14  /* Attribute value contains this value somewhere in it */
15}
16
17[data-value~="foo"] {
18  /* Attribute has this value in a space-separated list somewhere */
19}
20
21[data-value^="foo"] {
22  /* Attribute value starts with this */
23}
24
25[data-value|="foo"] {
26  /* Attribute value starts with this in a dash-separated list */
27}
28
29[data-value$="foo"] {
30  /* Attribute value ends with this */
31}

1[data-value] {
2  /* Attribute exists */
3}
4
5[data-value="foo"] {
6  /* Attribute has this exact value */
7}
8
9[data-value*="foo"] {
10  /* Attribute value contains this value somewhere in it */
11}
12
13[data-value~="foo"] {
14  /* Attribute has this value in a space-separated list somewhere */
15}
16
17[data-value^="foo"] {
18  /* Attribute value starts with this */
19}
20
21[data-value|="foo"] {
22  /* Attribute value starts with this in a dash-separated list */
23}
24
25[data-value$="foo"] {
26  /* Attribute value ends with this */
27}

1<!-- data-* attritubes can be used on any html element -->
2<div data-my-custom-data="true"></div>