-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·200 lines (197 loc) · 12.4 KB
/
index.html
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>CSS Colouring Book</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<section id="lecture">
<article>
<header>
<h1>CSS Selectors</h1>
</header>
<p>CSS (Cascading Style Sheets) is a language for describing the rendering of HTML documents on screen, on paper, in speech, etc. CSS uses Selectors for binding style properties to elements in the document.</p>
<p>Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in a HTML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code.</p>
<p>The selectors that already exist in CSS1 and CSS2, and new selectors for CSS3 and other languages that may need them are described in <a href="https://www.w3.org/TR/css3-selectors/">https://www.w3.org/TR/css3-selectors/</a>.</p>
<h2>Class selectors: The house</h2>
<p>There is a house depicted below which consists of following parts: (tip: hover the words in order to get those highlighted in the image on the right hand side)</p>
<ul>
<li class="show-me" data-show=".house">House
<ul>
<li class="show-me" data-show=".roof">Roof
<ul>
<li class="show-me" data-show=".dormer">Dormer
<ul>
<li class="show-me" data-show=".dormer .window">Window</li>
</ul>
</li>
<li class="show-me" data-show=".roof .chimney">Chimney</li>
</ul>
</li>
<li class="show-me" data-show=".wall">Wall
<ul>
<li class="show-me" data-show=".wall > .window">Window</li>
<li class="show-me" data-show=".door">Door
<ul>
<li class="show-me" data-show=".door > .window">Window</li>
<li class="show-me" data-show=".door > .handle">Handle</li>
<li class="show-me" data-show=".door > .doorsteps">Doorsteps
<ul>
<li class="show-me" data-show=".door > .doorsteps > .doorstep">Doorstep</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
<p>The nesting in the list of identified parts of the house idicates the nesting of CSS classes applied to elements representing those.<p>
<h3>Class attribute</h3>
<p>Class is a HTML attribute which can be associated with any HTML element. Or, when put the other way round, any HTML element can have a class attribute.</p>
<p>There can be a single element with some specific class, or many elements with the same class. The class is not a unique identifier, as it can be shared with many, possibly different, elements.</p>
<h3>Simple class selector</h3>
<p>Working with HTML, authors may use the "period" notation (also known as "full stop", U+002E, .) when representing the class attribute. The class attribute value must immediately follow the full stop (.).</p>
<p>More details on the class selector can be found on<a href="https://www.w3.org/TR/css3-selectors/#class-html">https://www.w3.org/TR/css3-selectors/#class-html</a></p>
<h3>Let's explore The House using CSS Selectors</h3>
<p>All the parts of our house identified in the list above, are assigned a matching class. Thus, in order to explore (select) window or door, typing <code>.window</code> or <code>.door</code> should do it.</p>
<p>Keep in mind, that, a class is a non-unique attribute, and thus many different elements may share such class. Let's take, for example, <code>.window</code>. Such selector would select all windows in our house. The one in roof, door and even the big one. Try it yourself!</p>
<h4>Exercise 1</h4>
<p>Using the textfield below, select all following parts of the house:</p>
<ul class="exercise" id="exercise-1">
<li class="task" data-exercise-type="select" data-exercise-solution=".door">door</li>
<li class="task" data-exercise-type="select" data-exercise-solution=".roof">roof</li>
<li class="task" data-exercise-type="select" data-exercise-solution=".wall">wall</li>
<li class="task" data-exercise-type="select" data-exercise-solution=".window">window</li>
<li class="task" data-exercise-type="select" data-exercise-solution=".chimney">chimney</li>
</ul>
<p><label>Class selector(s): <input type="text" class="css-rules" value="." data-exercise-form-for="exercise-1"/></label></p>
<h2>Chaining selectors - sequences of simple selectors</h2>
<p>A sequence of simple selectors is a chain of simple selectors, for instance class selectors discussed above, that are not separated by a combinator. Combinators will be discussed in following chapter.</p>
<p>Let's start with an example for a better idea of such chain or sequence of simple selectors. You might have noticed, that not all the windows in our house are the same. Not only some are place inside the roof, some are inside the door, and some windows are typical windows in a wall, but some are also round, and some are square.</p>
<p>This shape related information is, along the type information, is stored inside a class selector as well. For the tution purposes, it's simplified to <code>round</code> and <code>square</code> class names. In order to select all square windows, such a chain or sequence of simple selectors would look the following way: <code>.window.square</code>. Let's give it a try!</p>
<h3>Exercise 2: chaining simple selectors</h3>
<p>Select all following elements of given shape:</p>
<ul class="exercise" id="exercise-2">
<li class="task" data-exercise-type="select" data-exercise-solution=".window.square">Square windows</li>
<li class="task" data-exercise-type="select" data-exercise-solution=".window.round">Round windows</li>
</ul>
<p><label>Class selector(s): <input type="text" class="css-rules" value="." data-exercise-form-for="exercise-2"/></label></p>
<h2>Combining selectors</h2>
<p>CSS Selectors can be combined using following list of combinators:</p>
<ul>
<li>whitespace</li>
<li>"greater-than sign" <code>></code></li>
<li>"plus sign" <code>+</code></li>
<li>"tilde" <code>~</code></tilde>
</ul>
<h3>Descendant combinator</h3>
<p>You may want selectors to describe an element that is the descendant of another element (e.g., "a window element that is contained within a door element"). Descendant combinators express such a relationship. A descendant combinator is whitespace that separates two selectors. Thus, selecting a window inside a door, could be done using following notation: <code>.door .window</code>, where the spance in between <code>.door</code> and <code>.window</code> is the descendant combinator, represented by whitespace.</p>
<p>Let's give it a try. Let's select a window in door, and window in roof, or more precisely window in dormer.</p>
<h4>Exercise 3: Descendant combinator</h4>
<ul class="exercise" id="exercise-3">
<li class="task" data-exercise-type="select" data-exercise-solution=".door .window">Window inside door</li>
<li class="task" data-exercise-type="select" data-exercise-solution=".dormer .window">Window inside dormer</li>
</ul>
<p><label>Class selector(s): <input type="text" class="css-rules" value="." data-exercise-form-for="exercise-3"/></label></p>
<h3>Child Combinator</h3>
<p>A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, >) character and separates either two siple selectors, or two sequences of simple selectors, or a simple selector and a sequence of simple selectors.</p>
<p>The child-parent relationship in terms of HTML and CSS can be explained by an example on our house. Let's have a look on the two square windows. One is directly inside the wall, the second one, is inside the door. Both can be selected by <code>.wall .window</code>. Give it a try:</p>
<p><label>Class selector(s): <input type="text" class="css-rules" value="."/></label></p>
<p>But, when we are talking about child-parent relationship, the big window inside the wall, is a child of the wall. The other one, is directly inside the door. Thus, it is a child of door. But not a child of the wall, as there is another element in between those two - the door.</p>
<p>We could say, that the window inside the door is a grandchild of the wall. But CSS does not take grandchild relationship into account. All relationships beyond the parent-child relationship belong to the category of descendants, and we would need to use the descendant combinator, as it was discussed in the previous chapter.</p>
<h4>Exercise 4: Child combinator</h4>
<p>Let's explore the parent-child relationships in our house. Select following elements starting off the <code>.wall</code>:</p>
<ul class="exercise" id="exercise-4">
<li class="task" data-exercise-type="select" data-exercise-solution=".wall > .window">Window directly inside the wall</li>
<li class="task" data-exercise-type="select" data-exercise-solution=".wall > .door > .window">Window inside the door, which are inside the wall</li>
</ul>
<p><label>Class selector(s): <input type="text" class="css-rules" value=".wall >" data-exercise-form-for="exercise-4"/></label></p>
<h2>The Colouring part</h2>
<p>All you have learned about CSS selectors so far should be enough to turn the black&white house into a nicely coloured one.</p>
<p>You'll find a colourbox and an input field for your selectors below. Pick a colour, write a selector, and colour the house!</p>
<form id="colouring-form">
<input type="color" value="#ffffff" id="color-1"/><input type=text" id="color-selector-1"/><br/>
<input type="color" value="#ffffff" id="color-2"/><input type=text" id="color-selector-2"/><br/>
<input type="color" value="#ffffff" id="color-3"/><input type=text" id="color-selector-3"/><br/>
</form>
</article>
</section>
<section id="playground">
<section id="canvas">
<div class="house">
<div class="roof" data-colour-mapping="borderTopColor">
<div class="chimney"></div>
<div class="dormer">
<div class="window round">
<div class="sash left">
<div class="frame">
<div class="glazing top"></div>
<div class="glazing bottom"></div>
</div>
</div>
<div class="sash right">
<div class="frame">
<div class="glazing top"></div>
<div class="glazing bottom"></div>
</div>
</div>
</div>
</div>
</div>
<div class="wall">
<div class="window square">
<div class="sash left">
<div class="frame">
<div class="glazing top"></div>
<div class="glazing bottom"></div>
</div>
</div>
<div class="sash right">
<div class="frame">
<div class="glazing top"></div>
<div class="glazing bottom"></div>
</div>
</div>
</div>
<div class="door">
<div class="window square">
<div class="sash left">
<div class="frame">
<div class="glazing top"></div>
<div class="glazing bottom"></div>
</div>
</div>
<div class="sash right">
<div class="frame">
<div class="glazing top"></div>
<div class="glazing bottom"></div>
</div>
</div>
</div>
<div class="handle"></div>
<div class="doorsteps">
<div class="doorstep first"></div>
<div class="doorstep second"></div>
</div>
</div>
</div>
</div>
</section>
<section id="editor">
<label>Rules: <input type="text" class="css-rules" value=""/></label>
</section>
</section><!-- /#playground -->
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>