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}
1If you're talking aabout the inner content of an element, this is impossible with CSS3.
2However, you can use this for the data attributes of an element:
3
4 div [data-value="foo"] {
5 display: block;
6 }
7
8- GameGlitz