Skip to content

Commit f75e994

Browse files
MeFoDyMeFoDy
committed
Add Selectors talk
1 parent 26151a0 commit f75e994

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+3163
-9
lines changed

‎css-editor/index.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ <h2 class="shout">Только HTML и CSS!</h2>
181181
<h2 class="shout">Some CSS later...</h2>
182182
</section>
183183

184-
<section class="slide clear">
184+
<section class="slide">
185185
<iframe src="./demo/editor-nojs-start.html" frameborder="0" class="cover width height"></iframe>
186186
<a class="copyright" href="./demo/editor-nojs-start.html">Demo: Start</a>
187187
</section>
@@ -200,7 +200,7 @@ <h2>contenteditable</h2>
200200
</ul>
201201
</section>
202202

203-
<section class="slide clear">
203+
<section class="slide">
204204
<iframe src="./demo/editor-nojs-editable.html" frameborder="0" class="cover width height"></iframe>
205205
<a class="copyright" href="./demo/editor-nojs-editable.html">Demo: Editable</a>
206206
</section>
@@ -214,7 +214,7 @@ <h2 class="shout"><code>spellcheck</code></h2>
214214
<h2 class="shout"><code>spellcheck=false</code></h2>
215215
</section>
216216

217-
<section class="slide clear">
217+
<section class="slide">
218218
<iframe src="./demo/editor-nojs-spellcheck.html" frameborder="0" class="cover width height"></iframe>
219219
<a class="copyright" href="./demo/editor-nojs-spellcheck.html">Demo: Spellcheck</a>
220220
</section>
@@ -231,7 +231,7 @@ <h2 class="shout">Тёмная тема!</h2>
231231
}</code></pre>
232232
</section>
233233

234-
<section class="slide clear">
234+
<section class="slide">
235235
<iframe src="./demo/editor-nojs-darktheme.html" frameborder="0" class="cover width height"></iframe>
236236
<a class="copyright" href="./demo/editor-nojs-darktheme.html">Demo: Dark Theme</a>
237237
</section>
@@ -276,7 +276,7 @@ <h2 class="shout"><code>@scope</code></h2>
276276
<a class="copyright" href="https://www.youtube.com/watch?v=FeFMSZVFuBY">Алло, мы с нижнего этажа, у вас стили протекают</a>
277277
</section>
278278

279-
<section class="slide clear">
279+
<section class="slide">
280280
<iframe src="./demo/editor-nojs-full.html" frameborder="0" class="cover width height"></iframe>
281281
<a class="copyright" href="./demo/editor-nojs-full.html">Demo: Isolate</a>
282282
</section>
@@ -309,7 +309,7 @@ <h2 class="shout"><code>resize</code></h2>
309309
}</code></pre>
310310
</section>
311311

312-
<section class="slide clear">
312+
<section class="slide">
313313
<iframe src="./demo/editor-nojs-resize.html" frameborder="0" class="cover width height"></iframe>
314314
<a class="copyright" href="./demo/editor-nojs-resize.html">Demo: Resize</a>
315315
</section>
@@ -372,7 +372,7 @@ <h2 class="shout">Custom Highlight API</h2>
372372
}</code></pre>
373373
</section>
374374

375-
<section class="slide clear">
375+
<section class="slide">
376376
<iframe src="./demo/editor-js-highlight.html" frameborder="0" class="cover width height"></iframe>
377377
<a class="copyright" href="./demo/editor-js-highlight.html">Demo: Highlight</a>
378378
</section>

‎css-selectors/demos/quiz.html

+213
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Квиз про CSS на CSS</title>
8+
<style>
9+
html {
10+
color-scheme: dark;
11+
}
12+
13+
body {
14+
font-family: "PT Sans", sans-serif;
15+
line-height: 1.6;
16+
font-size: 20px;
17+
counter-reset: correct;
18+
}
19+
20+
h1 {
21+
text-align: center;
22+
}
23+
24+
p {
25+
margin: 0;
26+
}
27+
28+
body:has(:checked:not([data-correct]:checked)) h1::before {
29+
content: '❌ ';
30+
}
31+
32+
body:not(:has([data-correct]:not(:checked))) h1::before {
33+
content: '✅ ';
34+
}
35+
36+
.cards {
37+
max-width: 640px;
38+
margin: 0 auto;
39+
counter-reset: question;
40+
}
41+
42+
.card {
43+
--color-primary: #ccc;
44+
counter-increment: question;
45+
border: 2px solid var(--color-primary);
46+
border-left-width: 15px;
47+
position: relative;
48+
49+
>p::before {
50+
content: counter(question) ". ";
51+
}
52+
}
53+
54+
.card:not(:last-child) {
55+
margin-bottom: 1em;
56+
}
57+
58+
.verdicts {
59+
position: absolute;
60+
bottom: 0;
61+
right: 0;
62+
}
63+
64+
.verdict {
65+
background-color: var(--color-primary);
66+
color: #000;
67+
border-radius: 10px;
68+
padding: 0.2em 0.8em;
69+
margin-right: 0.5em;
70+
margin-bottom: 0.7em;
71+
font-size: 0.8em;
72+
text-align: center;
73+
display: none;
74+
}
75+
76+
.answer:has(:checked) {
77+
color: var(--color-primary);
78+
accent-color: var(--color-primary);
79+
}
80+
81+
.answer:has([data-correct]:checked) {
82+
counter-increment: correct;
83+
}
84+
85+
.card:has([data-correct]:checked) {
86+
--color-primary: lime;
87+
88+
.verdict-ok {
89+
display: block;
90+
}
91+
}
92+
93+
.card:has(:checked:not([data-correct])) {
94+
--color-primary: tomato;
95+
96+
.verdict-wa {
97+
display: block;
98+
}
99+
}
100+
101+
.answers-counter {
102+
margin-bottom: 10em;
103+
}
104+
105+
.answers-counter::after {
106+
content: counter(correct) " из " counter(question);
107+
}
108+
</style>
109+
</head>
110+
111+
<body>
112+
<h1>CSS-квиз</h1>
113+
<div class="cards">
114+
<fieldset class="card">
115+
<p>Какой псевдокласс отвечает за выбор непосещённых ссылок?</p>
116+
<div class="answer">
117+
<input type="radio" name="q1" id="q1-1" value="1" data-correct>
118+
<label for="q1-1">:link</label>
119+
</div>
120+
<div class="answer">
121+
<input type="radio" name="q1" id="q1-2" value="2">
122+
<label for="q1-2">:visited</label>
123+
</div>
124+
<div class="answer">
125+
<input type="radio" name="q1" id="q1-3" value="3">
126+
<label for="q1-3">:any-link</label>
127+
</div>
128+
<div class="verdicts">
129+
<p class="verdict verdict-ok">Верно! Ты молодец!</p>
130+
<p class="verdict verdict-wa">Неверно. Попробуй ещё.</p>
131+
</div>
132+
</fieldset>
133+
<fieldset class="card">
134+
<p>Как можно выбрать чётные элементы списка?</p>
135+
<div class="answer">
136+
<input type="radio" name="q2" id="q2-1" value="1">
137+
<label for="q2-1">li:nth-child(2)</label>
138+
</div>
139+
<div class="answer">
140+
<input type="radio" name="q2" id="q2-2" value="2" data-correct>
141+
<label for="q2-2">li:nth-child(2n)</label>
142+
</div>
143+
<div class="answer">
144+
<input type="radio" name="q2" id="q2-3" value="3">
145+
<label for="q2-3">li:nth-child(2n+1)</label>
146+
</div>
147+
<div class="verdicts">
148+
<p class="verdict verdict-ok">Шаришь в селекторах!</p>
149+
<p class="verdict verdict-wa">А если внимательнее?</p>
150+
</div>
151+
</fieldset>
152+
<fieldset class="card">
153+
<p>Какой селектор имеет нулевую специфичность?</p>
154+
<div class="answer">
155+
<input type="radio" name="q3" id="q3-1" value="1" data-correct>
156+
<label for="q3-1">:is(*)</label>
157+
</div>
158+
<div class="answer">
159+
<input type="radio" name="q3" id="q3-2" value="2">
160+
<label for="q3-2">li:where(#id)</label>
161+
</div>
162+
<div class="answer">
163+
<input type="radio" name="q3" id="q3-3" value="3">
164+
<label for="q3-3">::before</label>
165+
</div>
166+
<div class="verdicts">
167+
<p class="verdict verdict-ok">Ну красота же!</p>
168+
<p class="verdict verdict-wa">Почти, попробуй ещё раз.</p>
169+
</div>
170+
</fieldset>
171+
<fieldset class="card">
172+
<p>Как выбрать элемент, у которого атрибут начинается с подстроки?</p>
173+
<div class="answer">
174+
<input type="radio" name="q4" id="q4-1" value="1">
175+
<label for="q4-1">[attr=^"value"]</label>
176+
</div>
177+
<div class="answer">
178+
<input type="radio" name="q4" id="q4-2" value="2">
179+
<label for="q4-2">[attr="value"]</label>
180+
</div>
181+
<div class="answer">
182+
<input type="radio" name="q4" id="q4-3" value="3" data-correct>
183+
<label for="q4-3">[attr^="value"]</label>
184+
</div>
185+
<div class="verdicts">
186+
<p class="verdict verdict-ok">Всё верно!</p>
187+
<p class="verdict verdict-wa">Запутывает, понимаю.</p>
188+
</div>
189+
</fieldset>
190+
<fieldset class="card">
191+
<p>Как выбрать список, в котором есть ровно 5 элементов?</p>
192+
<div class="answer">
193+
<input type="radio" name="q5" id="q5-1" value="1" data-correct>
194+
<label for="q5-1">ul:has(li:nth-child(5):last-child)</label>
195+
</div>
196+
<div class="answer">
197+
<input type="radio" name="q5" id="q5-2" value="2">
198+
<label for="q5-2">ul:has(li:nth-child(5n):last-child)</label>
199+
</div>
200+
<div class="answer">
201+
<input type="radio" name="q5" id="q5-3" value="3">
202+
<label for="q5-3">ul:has(li:nth-child(5):only-child)</label>
203+
</div>
204+
<div class="verdicts">
205+
<p class="verdict verdict-ok">Отлично!</p>
206+
<p class="verdict verdict-wa">Увы, нет. Попробуй ещё.</p>
207+
</div>
208+
</fieldset>
209+
<p class="answers-counter">Верных ответов: </p>
210+
</div>
211+
</body>
212+
213+
</html>

0 commit comments

Comments
 (0)