Skip to content

Commit f66305d

Browse files
bjellinebjelline
committed
new illustrations for dom + selectors, selector demo
1 parent 1c9acca commit f66305d

31 files changed

+7553
-101
lines changed

‎css-layout/selektoren/index.html‎

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ <h2 id="child-selector">Child Selector</h2>
188188
<pre><code class="language-css linenums"> li &gt; a { color: yellow; }
189189
</code></pre></div>
190190

191-
<p><img src="/images/css-layout/selector-child.png" alt="Document Object Model und Selektor" ></p>
191+
<p><img src="/images/css-layout/selector-child.png" srcset="/images/css-layout/selector-child.png 1x, /images/css-layout/selector-child@2x.png 2x" alt="Document Object Model und Selektor" ></p>
192192

193193

194194
<a class="slide_break do-not-print" id="slide-3" href="slide.html#slide-3" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 3">▻</a>
@@ -213,21 +213,27 @@ <h2 id="pseudo-classes">Pseudo Classes</h2>
213213
</ul>
214214

215215
<div class="example">
216-
<pre><code class="language-css linenums"> li:first-child { color: yellow; }
216+
<pre><code class="language-css linenums"> :first-child { color: yellow; }
217217
</code></pre></div>
218218

219-
<p><img src="/images/css-layout/selector-firstchild.png" alt="Document Object Model und Selektor" ></p>
219+
<p><img src="/images/css-layout/selector-firstchild.png" srcset="/images/css-layout/selector-firstchild.png 1x, /images/css-layout/selector-firstchild@2x.png 2x" alt="Document Object Model und Selektor" ></p>
220220

221221

222222
<a class="slide_break do-not-print" id="slide-4" href="slide.html#slide-4" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 4">▻</a>
223223

224224
<h2 id="has-pseudo-class">Has Pseudo Class</h2>
225225

226-
<p>Die Pseudo Class <code>:has()</code> ist die Umkehrung des Descendant Selectors: Mit <code>div:has(a)</code> wird der <code>div</code> Tag selektiert, falls er einen <code>a</code> Tag als Nachkommen hat.</p>
226+
<p>Die Pseudo Class <code>:has()</code> ist die Umkehrung des Descendant Selectors: Mit <code>section:has(a)</code> wird der <code>section</code> Tag selektiert, falls er einen <code>a</code> Tag als Nachkommen hat.</p>
227227

228-
<p><img src="/images/css/selector-has.png" alt="Document Object Model und has psuedo class" ></p>
228+
<p><img src="/images/css/selector-has.png" srcset="/images/css/selector-has.png 1x, /images/css/selector-has@2x.png 2x" alt="Document Object Model und has psuedo class" ></p>
229229

230-
<p>In <code>:has(...)</code> kann man auch kompliziertere Selektoren verwenden, zum Beispiel <code>select:has(option[value=""]:checked)</code>. Hier wird ein Select-Tag selektiert, falls von seinen optionen diejenige ausgewählt ist, die den Leeren Wert hat. Siehe <a href="/images/css/example-has.html">Demo</a>.</p>
230+
231+
<a class="slide_break do-not-print" id="slide-5" href="slide.html#slide-5" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 5">▻</a>
232+
233+
234+
Innerhalb von has kann man auch kompliziertere Selektoren verwenden, zum Beispiel <code>select:has(option[value=""]:checked)</code></p>
235+
236+
<p>Hier wird ein Select-Tag selektiert, falls von seinen optionen diejenige ausgewählt ist, die den Leeren Wert hat. Siehe <a href="/images/css/example-has.html">Demo</a></p>
231237

232238
<div class="example">
233239
<pre><code class="language-html linenums">&lt;style&gt;
@@ -244,43 +250,27 @@ <h2 id="has-pseudo-class">Has Pseudo Class</h2>
244250
</code></pre></div>
245251

246252

247-
<a class="slide_break do-not-print" id="slide-5" href="slide.html#slide-5" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 5">▻</a>
248-
249-
<h2 id="adjacent-selector">Adjacent selector</h2>
250-
251-
<p>Dieser Selector wählt das direkte Geschwister-Node aus.</p>
252-
253-
<div class="example">
254-
<pre><code class="language-css linenums"> p + h1 { color: yellow; }
255-
li + li { color: yellow; }
256-
</code></pre></div>
257-
258-
<p><img src="/images/css-layout/selector-adj.png" alt="Document Object Model und Selektor" ></p>
259-
260-
261253
<a class="slide_break do-not-print" id="slide-6" href="slide.html#slide-6" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 6">▻</a>
262254

263255
<h2 id="kombinationen-von-selektoren">Kombinationen von Selektoren</h2>
264256

265257
<p>Wenn man mehrere Selektoren kombiniert hat das Komma die geringste Präzedenz:</p>
266258

267259
<div class="example">
268-
<pre><code class="language-css linenums"> p, div a { color: yellow; }
260+
<pre><code class="language-css linenums"> p, section a { color: yellow; }
269261
</code></pre></div>
270262

271-
<p><img src="/images/css-layout/selector-precedence.png" alt="Document Object Model und Selektor" ></p>
263+
<p>Diesen Selektor liest mal als: entweder wird der Absatz p selektiert, oder ein a innerhalb einer Section. (und nicht: es wird ein Link selektiert, der entweder in einem Absatz oder einer Section ist)</p>
272264

265+
<p><img src="/images/css-layout/selector-precedence.png" srcset="/images/css-layout/selector-precedence.png 1x, /images/css-layout/selector-precedence@2x.png 2x" alt="Document Object Model und Selektor" ></p>
273266

274-
<a class="slide_break do-not-print" id="slide-7" href="slide.html#slide-7" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 7">▻</a>
275-
276-
<h2 id="neu-2024-has">Neu 2024: <code>has()</code></h2>
277267

278-
279-
<a class="slide_break do-not-print" id="slide-8" href="slide.html#slide-8" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 8">▻</a>
268+
<a class="slide_break do-not-print" id="slide-7" href="slide.html#slide-7" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 7">▻</a>
280269

281270
<h2 id="css-selektoren-ben">CSS Selektoren Üben</h2>
282271

283272
<ul>
273+
<li><a href="/images/css/selectors/vis.html">Selektor Demo</a> - mit dieser Seite wurden die Illustrationen erstellt</li>
284274
<li><a href="http://flukeout.github.io/">css diner - css üben mit japanischem essen</a></li>
285275
<li><a href="https://www.w3schools.com/cssref/trysel.asp">try selectors - von w3schools</a></li>
286276
</ul>

‎css-layout/selektoren/slide.html‎

Lines changed: 16 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ <h2 id="child-selector">Child Selector</h2>
224224
<pre><code class="language-css linenums"> li &gt; a { color: yellow; }
225225
</code></pre></div>
226226

227-
<p><img src="/images/css-layout/selector-child.png" alt="Document Object Model und Selektor" ></p>
227+
<p><img src="/images/css-layout/selector-child.png" srcset="/images/css-layout/selector-child.png 1x, /images/css-layout/selector-child@2x.png 2x" alt="Document Object Model und Selektor" ></p>
228228

229229
</div>
230230
<div class="slide">
@@ -249,21 +249,27 @@ <h2 id="pseudo-classes">Pseudo Classes</h2>
249249
</ul>
250250

251251
<div class="example">
252-
<pre><code class="language-css linenums"> li:first-child { color: yellow; }
252+
<pre><code class="language-css linenums"> :first-child { color: yellow; }
253253
</code></pre></div>
254254

255-
<p><img src="/images/css-layout/selector-firstchild.png" alt="Document Object Model und Selektor" ></p>
255+
<p><img src="/images/css-layout/selector-firstchild.png" srcset="/images/css-layout/selector-firstchild.png 1x, /images/css-layout/selector-firstchild@2x.png 2x" alt="Document Object Model und Selektor" ></p>
256256

257257
</div>
258258
<div class="slide">
259259

260260
<h2 id="has-pseudo-class">Has Pseudo Class</h2>
261261

262-
<p>Die Pseudo Class <code>:has()</code> ist die Umkehrung des Descendant Selectors: Mit <code>div:has(a)</code> wird der <code>div</code> Tag selektiert, falls er einen <code>a</code> Tag als Nachkommen hat.</p>
262+
<p>Die Pseudo Class <code>:has()</code> ist die Umkehrung des Descendant Selectors: Mit <code>section:has(a)</code> wird der <code>section</code> Tag selektiert, falls er einen <code>a</code> Tag als Nachkommen hat.</p>
263263

264-
<p><img src="/images/css/selector-has.png" alt="Document Object Model und has psuedo class" ></p>
264+
<p><img src="/images/css/selector-has.png" srcset="/images/css/selector-has.png 1x, /images/css/selector-has@2x.png 2x" alt="Document Object Model und has psuedo class" ></p>
265265

266-
<p>In <code>:has(...)</code> kann man auch kompliziertere Selektoren verwenden, zum Beispiel <code>select:has(option[value=""]:checked)</code>. Hier wird ein Select-Tag selektiert, falls von seinen optionen diejenige ausgewählt ist, die den Leeren Wert hat. Siehe <a href="/images/css/example-has.html">Demo</a>.</p>
266+
</div>
267+
<div class="slide">
268+
269+
270+
Innerhalb von has kann man auch kompliziertere Selektoren verwenden, zum Beispiel <code>select:has(option[value=""]:checked)</code></p>
271+
272+
<p>Hier wird ein Select-Tag selektiert, falls von seinen optionen diejenige ausgewählt ist, die den Leeren Wert hat. Siehe <a href="/images/css/example-has.html">Demo</a></p>
267273

268274
<div class="example">
269275
<pre><code class="language-html linenums">&lt;style&gt;
@@ -282,41 +288,25 @@ <h2 id="has-pseudo-class">Has Pseudo Class</h2>
282288
</div>
283289
<div class="slide">
284290

285-
<h2 id="adjacent-selector">Adjacent selector</h2>
286-
287-
<p>Dieser Selector wählt das direkte Geschwister-Node aus.</p>
288-
289-
<div class="example">
290-
<pre><code class="language-css linenums"> p + h1 { color: yellow; }
291-
li + li { color: yellow; }
292-
</code></pre></div>
293-
294-
<p><img src="/images/css-layout/selector-adj.png" alt="Document Object Model und Selektor" ></p>
295-
296-
</div>
297-
<div class="slide">
298-
299291
<h2 id="kombinationen-von-selektoren">Kombinationen von Selektoren</h2>
300292

301293
<p>Wenn man mehrere Selektoren kombiniert hat das Komma die geringste Präzedenz:</p>
302294

303295
<div class="example">
304-
<pre><code class="language-css linenums"> p, div a { color: yellow; }
296+
<pre><code class="language-css linenums"> p, section a { color: yellow; }
305297
</code></pre></div>
306298

307-
<p><img src="/images/css-layout/selector-precedence.png" alt="Document Object Model und Selektor" ></p>
308-
309-
</div>
310-
<div class="slide">
299+
<p>Diesen Selektor liest mal als: entweder wird der Absatz p selektiert, oder ein a innerhalb einer Section. (und nicht: es wird ein Link selektiert, der entweder in einem Absatz oder einer Section ist)</p>
311300

312-
<h2 id="neu-2024-has">Neu 2024: <code>has()</code></h2>
301+
<p><img src="/images/css-layout/selector-precedence.png" srcset="/images/css-layout/selector-precedence.png 1x, /images/css-layout/selector-precedence@2x.png 2x" alt="Document Object Model und Selektor" ></p>
313302

314303
</div>
315304
<div class="slide">
316305

317306
<h2 id="css-selektoren-ben">CSS Selektoren Üben</h2>
318307

319308
<ul>
309+
<li><a href="/images/css/selectors/vis.html">Selektor Demo</a> - mit dieser Seite wurden die Illustrationen erstellt</li>
320310
<li><a href="http://flukeout.github.io/">css diner - css üben mit japanischem essen</a></li>
321311
<li><a href="https://www.w3schools.com/cssref/trysel.asp">try selectors - von w3schools</a></li>
322312
</ul>

‎css/basic-selectors/index.html‎

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ <h2 class="title" id="slide-0">
5353
<div id="slide-1" title="Folie Nr. 1"></div><p>Um CSS Selektoren zu verstehen muss man das Document Object Betrachten:
5454
die Darstellung des HTML-Dokuments als Baum:</p>
5555

56-
<p><img src="/images/css/html-und-dom.png" alt="Document Object Model und Selektor" ></p>
56+
<p><img src="/images/css/html-und-dom.png" srcset="/images/css/html-und-dom.png 1x, /images/css/html-und-dom@2x.png 2x" alt="Document Object Model und Selektor" ></p>
5757

5858
<p>Bei der Beschreibung des Baumes verwendet man folgende Fachbegriffe:</p>
5959

@@ -74,7 +74,7 @@ <h2 id="universal-selector">Universal Selector</h2>
7474

7575
<p>Der Selektor <code>*</code> wählt alle Elemente des Baums aus:</p>
7676

77-
<p><img src="/images/css/selector-universal.png" alt="Document Object Model und Selektor" ></p>
77+
<p><img src="/images/css/selector-universal.png" srcset="/images/css/selector-universal.png 1x, /images/css/selector-universal@2x.png 2x" alt="Document Object Model und Selektor" ></p>
7878

7979

8080
<a class="slide_break do-not-print" id="slide-3" href="slide.html#slide-3" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 3">▻</a>
@@ -85,10 +85,10 @@ <h2 id="type-selector">Type Selector</h2>
8585
zum Beispiel wählt <code>li</code> alle Listen-Elemente aus:</p>
8686

8787
<div class="example">
88-
<pre><code class="language-css linenums"> li { color: red; }
88+
<pre><code class="language-css linenums"> li { color: yellow; }
8989
</code></pre></div>
9090

91-
<p><img src="/images/css/selector-type.png" alt="Document Object Model und Selektor" ></p>
91+
<p><img src="/images/css/selector-type.png" srcset="/images/css/selector-type.png 1x, /images/css/selector-type@2x.png 2x" alt="Document Object Model und Selektor" ></p>
9292

9393

9494
<a class="slide_break do-not-print" id="slide-4" href="slide.html#slide-4" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 4">▻</a>
@@ -100,10 +100,10 @@ <h2 id="selector-list">Selector List</h2>
100100
oder <code>h2</code>, oder <code>a</code>:</p>
101101

102102
<div class="example">
103-
<pre><code class="language-css linenums"> h1,h2,a { color: red; }
103+
<pre><code class="language-css linenums"> h1,h2,a { color: yellow; }
104104
</code></pre></div>
105105

106-
<p><img src="/images/css/selector-group.png" alt="Document Object Model und Selektor" ></p>
106+
<p><img src="/images/css/selector-group.png" srcset="/images/css/selector-group.png 1x, /images/css/selector-group@2x.png 2x" alt="Document Object Model und Selektor" ></p>
107107

108108
<p>(Achtung Falle: für Links mit dem <code>a</code> Tag gelten noch zusätzliche Regeln,
109109
siehe weiter Unten.)</p>
@@ -117,66 +117,69 @@ <h2 id="descendant-combinator">Descendant Combinator</h2>
117117
geschrieben.</p>
118118

119119
<p>Im Beispiel unten werden alle <code>a</code> Tags ausgewählt, die Nachkomme
120-
eines <code>div</code> sind:</p>
120+
eines <code>section</code> sind:</p>
121121

122-
<p>Achtung: <code>div</code> wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt!</p>
122+
<p>Achtung: <code>section</code> wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt!</p>
123123

124124
<div class="example">
125-
<pre><code class="language-css linenums"> div a { color: red; }
125+
<pre><code class="language-css linenums"> section a { color: yellow; }
126126
</code></pre></div>
127127

128-
<p><img src="/images/css/selector-desc.png" alt="Document Object Model und Selektor" ></p>
128+
<p><img src="/images/css/selector-desc.png" srcset="/images/css/selector-desc.png 1x, /images/css/selector-desc@2x.png 2x" alt="Document Object Model und Selektor" ></p>
129129

130130

131131
<a class="slide_break do-not-print" id="slide-6" href="slide.html#slide-6" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 6">▻</a>
132132

133133
<h2 id="verschachteltes-css">Verschachteltes CSS</h2>
134134

135-
<p>(Neu in 2023)</p>
136-
137135
<p>Auch hier wird ein Element ausgewählt, das Nachkomme eines anderen Elements ist.</p>
138136

139-
<p>Achtung: <code>div</code> wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt!</p>
137+
<p>Achtung: <code>section</code> wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt!</p>
140138

141139
<div class="example">
142-
<pre><code class="language-css linenums"> div {
140+
<pre><code class="language-css linenums"> section {
143141
&amp; a {
144-
color: red;
142+
color: yellow;
145143
}
146144
}
147145
</code></pre></div>
148146

149-
<p><img src="/images/css/selector-desc.png" alt="Document Object Model und Selektor" ></p>
147+
<p><img src="/images/css/selector-desc.png" srcset="/images/css/selector-desc.png 1x, /images/css/selector-desc@2x.png 2x" alt="Document Object Model und Selektor" ></p>
148+
149+
150+
<a class="slide_break do-not-print" id="slide-7" href="slide.html#slide-7" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 7">▻</a>
151+
152+
150153

151-
<p>Praktisch: man kann die Deklarationen für <code>div</code> auch mit
154+
<p>Praktisch: man kann die Deklarationen für <code>section</code> auch mit
152155
rein schreiben:</p>
153156

154157
<div class="example">
155-
<pre><code class="language-css linenums"> div {
158+
<pre><code class="language-css linenums"> section {
156159
border: 1px gray solid;
157160
padding: 10px;
158161
&amp; a {
159-
color: red;
162+
color: yellow;
160163
}
161164
}
162165
</code></pre></div>
163166

164167
<p>Und man kann das kaufmännische Und weglassen:</p>
165168

166169
<div class="example">
167-
<pre><code class="language-css linenums"> div {
170+
<pre><code class="language-css linenums"> section {
168171
border: 1px gray solid;
169172
padding: 10px;
170173
a {
171-
color: red;
174+
color: yellow;
172175
}
173176
}
174177
</code></pre></div>
175178

176179
<p><a href="/images/css/nested.html">Demo: Verschachteltes CSS</a></p>
177180

178181

179-
<a class="slide_break do-not-print" id="slide-7" href="slide.html#slide-7" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 7">▻</a>
182+
<a class="slide_break do-not-print" id="slide-8" href="slide.html#slide-8" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 8">▻</a>
180183

181184
<h2 id="links-formatieren">Links formatieren</h2>
182185

@@ -191,7 +194,7 @@ <h2 id="links-formatieren">Links formatieren</h2>
191194
</code></pre></div>
192195

193196

194-
<a class="slide_break do-not-print" id="slide-8" href="slide.html#slide-8" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 8">▻</a>
197+
<a class="slide_break do-not-print" id="slide-9" href="slide.html#slide-9" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 9">▻</a>
195198

196199

197200

@@ -209,7 +212,7 @@ <h2 id="links-formatieren">Links formatieren</h2>
209212
<p><a href="/images/css/link-icon.html">Demo</a></p>
210213

211214

212-
<a class="slide_break do-not-print" id="slide-9" href="slide.html#slide-9" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 9">▻</a>
215+
<a class="slide_break do-not-print" id="slide-10" href="slide.html#slide-10" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 10">▻</a>
213216

214217
<h3 id="interaktion">Interaktion</h3>
215218

@@ -221,11 +224,14 @@ <h3 id="interaktion">Interaktion</h3>
221224
<p><a href="/images/css/hover-active.html">Demo</a></p>
222225

223226

224-
<a class="slide_break do-not-print" id="slide-10" href="slide.html#slide-10" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 10">▻</a>
227+
<a class="slide_break do-not-print" id="slide-11" href="slide.html#slide-11" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 11">▻</a>
225228

226229
<h2 id="und-noch-viel-mehr">Und noch viel mehr</h2>
227230

228-
<p>Im Kapitel <a href="/css-layout/selektoren/">CSS Selektoren im Detail</a> geht es weiter.</p>
231+
<ul>
232+
<li>Im Kapitel <a href="/css-layout/selektoren/">CSS Selektoren im Detail</a> geht es weiter.</li>
233+
<li><a href="/images/css/selectors/vis.html">Selektor Demo</a> - mit dieser Seite wurden die Illustrationen erstellt</li>
234+
</ul>
229235
<div class="pagination do-not-print">
230236
<ul>
231237

0 commit comments

Comments
 (0)