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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
/*! something */
@charset 'utf-8';
@page :left {
margin: 2em;
}
@media screen and (foo: 1) {
.class {
color: red;
}
}
@import 'foo' layer(bar);
@layer foo {
.class {
color: red;
}
@layer bar {
.class2 {
color: red;
}
}
}
@layer foo.bar {
.class {
color: red;
}
}
@layer {
.class {
color: red;
}
}
*.class element#id[attr] [attr|="asd"][attr=value i]:pseudo::pseudo ~ :not(a, b) + :nth-child(odd):nth-child(2n + 1),
svg|*:matches(a)::slotted(c) > :nth-child(odd of a, :b):nth-child(2n + 1 of [a]),
:has(> img) {
color: green;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png',sizingMethod='scale') alpha(opacity=80);
width: expression(1 + 2);
background:
ident 1.2e+3 100% 4em/5ex calc(1em + 3% * 5),
url(path/to.png) url( 'path/test.svg' )
u+123-456 u+123???
rgba(1, 2, 3, 4) #def #123abc "string" 'string' (parenthesis) [ident] !important;
}
@media (device-aspect-ratio: 16/9) {
*|span:before {
--custom1: { something !important };
--custom2: ([]) !important;
background: element(#id);
}
}
@supports (box-shadow: 1px 2px black !important) {
.rule {
box-shadow: var(--something, fallback);
}
}
.-a#-b:-c::-d[-e][*|-f] {
-foo: 123;
}
:lang(en, 'de-DE') {}
<!-- /* CDO/CDC */ -->
@import 'foo' screen;
@keyframes 'anim' {
from { //color: red }
50.1% { color: green; background: green }
100% { ;color: blue;; }
}
edge\ .c\61ases {
--empty-var: ;
--bad-var:;
number: 0.1.2.3;
}
.foo {
color: blue;
&:hover {
color: green;
}
@nest :not(&) {
color: yellow;
}
@media (orientation: vertical) {
color: red;
}
@starting-style {
color: blue;
}
@scope (a) to (b) {
color: black;
}
}
@media (100px < width < 400px) {
@container foo {
.test {
color: #0f08;
}
}
}
/* general enclosed */
@media (foo: 123) and (1) and foo(1) {}
@supports selector(.a) {}
@container (width > 500px) and style(--foo:1) {}
@layer foo, bar {}
@starting-style {}
@scope (a) to (b) { c {} }
|
