/
attribute_selector.css
83 lines (65 loc) · 1.1 KB
/
attribute_selector.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* CSS [attribute] Selector */
input[checked] {
color: red;
}
a[invented] {
color: red;
}
a[target] {
color:red;
}
/* CSS [attribute="value"] Selector */
a[target="_blank"] {
background-color: yellow;
}
a[target="no_blank"] {
background-color: yellow;
}
input[value=""] {
background-color: yellow;
}
/* CSS [attribute~="value"] Selector */
input[title~="flower"] {
border: 5px solid yellow;
}
input[title~="grass"] {
border: 5px solid yellow;
}
/* CSS [attribute|="value"] Selector */
html[lang|="en"] {
background: yellow;
}
html[lang|="fr"] {
background: yellow;
}
/* CSS [attribute^="value"] Selector */
a[href^="http"] {
color: green;
}
a[href^="ssl"] {
color: green;
}
/* CSS [attribute$="value"] Selector */
a[href$="pdf"] {
color: blue;
}
a[href$="jpg"] {
color: blue;
}
a[href$="http"] {
color: blue;
}
/* CSS [attribute*="value"] Selector */
a[title*="thin"] {
border: 5px solid yellow;
}
a[title*="fat"] {
border: 5px solid yellow;
}
/* CSS [attribute*="value"] Selector with spaces */
[class*=" class2"] {
color: green;
}
[class*="class1 class2 "] {
color: blue;
}