diffdown.com
Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1# Universal selectors
2
3* {}
4div * {}
5
6==>
7
8StyleSheet(
9 RuleSet(UniversalSelector,Block),
10 RuleSet(DescendantSelector(TagSelector(TagName),UniversalSelector),Block))
11
12# Type selectors
13
14div, span {}
15h1, h2, h3, h4 {}
16
17==>
18
19StyleSheet(
20 RuleSet(TagSelector(TagName),TagSelector(TagName),Block),
21 RuleSet(TagSelector(TagName),TagSelector(TagName),TagSelector(TagName),TagSelector(TagName),Block))
22
23# Class selectors
24
25.class-a {}
26div.class-b, .class-c.class-d {}
27
28==>
29
30StyleSheet(
31 RuleSet(ClassSelector(ClassName),Block),
32 RuleSet(ClassSelector(TagSelector(TagName),ClassName),ClassSelector(ClassSelector(ClassName),ClassName),Block))
33
34# Id selectors
35
36#some-id, a#another-id {}
37
38==>
39
40StyleSheet(RuleSet(IdSelector(IdName),IdSelector(TagSelector(TagName),IdName),Block))
41
42# Attribute selectors
43
44[a] {}
45[b=c] {}
46[d~=e] {}
47a[b] {}
48
49==>
50
51StyleSheet(
52 RuleSet(AttributeSelector(AttributeName),Block),
53 RuleSet(AttributeSelector(AttributeName,MatchOp,ValueName),Block),
54 RuleSet(AttributeSelector(AttributeName,MatchOp,ValueName),Block),
55 RuleSet(AttributeSelector(TagSelector(TagName),AttributeName),Block))
56
57# Pseudo-class selectors
58
59a:hover {}
60:nth-child(2) {}
61
62==>
63
64StyleSheet(
65 RuleSet(PseudoClassSelector(TagSelector(TagName),":",PseudoClassName),Block),
66 RuleSet(PseudoClassSelector(":",PseudoClassName,ArgList(NumberLiteral)),Block))
67
68# Pseudo-element selectors
69
70a::first-line {}
71
72==>
73
74StyleSheet(RuleSet(PseudoClassSelector(TagSelector(TagName),"::",PseudoClassName),Block))
75
76# Child selectors
77
78a > b {}
79c > d > e {}
80
81==>
82
83StyleSheet(
84 RuleSet(ChildSelector(TagSelector(TagName),ChildOp,TagSelector(TagName)),Block),
85 RuleSet(ChildSelector(ChildSelector(TagSelector(TagName),ChildOp,TagSelector(TagName)),ChildOp,TagSelector(TagName)),Block))
86
87# Descendant selectors
88
89a b {}
90c d e {}
91
92==>
93
94StyleSheet(
95 RuleSet(DescendantSelector(TagSelector(TagName),TagSelector(TagName)),Block),
96 RuleSet(DescendantSelector(DescendantSelector(TagSelector(TagName),TagSelector(TagName)),TagSelector(TagName)),Block))
97
98# Nesting selectors
99
100a {
101 &.b {}
102 & c {}
103 c & {}
104 & > d {}
105}
106
107==>
108
109StyleSheet(RuleSet(TagSelector(TagName),Block(
110 RuleSet(ClassSelector(NestingSelector,ClassName),Block),
111 RuleSet(DescendantSelector(NestingSelector,TagSelector(TagName)),Block),
112 RuleSet(DescendantSelector(TagSelector(TagName), NestingSelector),Block),
113 RuleSet(ChildSelector(NestingSelector,ChildOp,TagSelector(TagName)),Block))))
114
115# Relative selectors
116
117a {
118 p {}
119 > f {}
120 + g {}
121}
122
123==>
124
125StyleSheet(RuleSet(TagSelector(TagName),Block(
126 RuleSet(TagSelector(TagName),Block),
127 RuleSet(ChildSelector(ChildOp,TagSelector(TagName)),Block),
128 RuleSet(SiblingSelector(SiblingOp,TagSelector(TagName)),Block))))
129
130# Sibling selectors
131
132a.b ~ c.d {}
133.e.f + .g.h {}
134
135==>
136
137StyleSheet(
138 RuleSet(SiblingSelector(ClassSelector(TagSelector(TagName),ClassName),SiblingOp,ClassSelector(TagSelector(TagName),ClassName)),Block),
139 RuleSet(SiblingSelector(ClassSelector(ClassSelector(ClassName),ClassName),SiblingOp,ClassSelector(ClassSelector(ClassName),ClassName)),Block))
140
141# The :not selector
142
143a:not(:hover) {}
144.b:not(c > .d) {}
145
146==>
147
148StyleSheet(
149 RuleSet(PseudoClassSelector(TagSelector(TagName),":",PseudoClassName,ArgList(PseudoClassSelector(":",PseudoClassName))),Block),
150 RuleSet(PseudoClassSelector(ClassSelector(ClassName),":",PseudoClassName,ArgList(ChildSelector(TagSelector(TagName),ChildOp,ClassSelector(ClassName)))),Block))