Skip to content

Commit 6170b98

Browse files
bjellinebjelline
committed
better selector 2025
1 parent f66305d commit 6170b98

File tree

16 files changed

+217
-41
lines changed

16 files changed

+217
-41
lines changed

‎css-layout/selektoren/index.html‎

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -193,33 +193,70 @@ <h2 id="child-selector">Child Selector</h2>
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>
195195

196+
<h2 id="attribute-selector">Attribute Selector</h2>
197+
198+
<p>Mit dem Attribute Selector kann man Attribute und Werte angeben. Entweder Hier selektieren wir einen Link, dessen href-Attribut mit mailto beginnt:</p>
199+
200+
<div class="example">
201+
<pre><code class="language-css linenums"> a[href^=&quot;mailto&quot;] { color: yellow; }
202+
</code></pre></div>
203+
204+
<p><img src="/images/css-layout/attr-selector.png" srcset="/images/css-layout/attr-selector.png 1x, /images/css-layout/attr-selector@2x.png 2x" alt="Document Object Model und Selektor" ></p>
205+
206+
<p>Es gibt mehrere Varianten dieses Selektors:</p>
207+
208+
<div class="example">
209+
<pre><code class="language-css linenums"> a[href] /* Attribut existiert */
210+
a[href=&quot;https://example.com&quot;] /* Attribut hat genau diesen Wert */
211+
a[href^=&quot;mailto&quot;] /* Wert beginnt mit ... */
212+
a[href$=&quot;.svg&quot;] /* Wert endet mit ... */
213+
a[href*=&quot;www&quot;] /* Wert enthält ... */
214+
</code></pre></div>
215+
216+
217+
<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>
218+
196219
<h2 id="pseudo-classes">Pseudo Classes</h2>
197220

198-
<p>Wir haben im Zusammenhang mit Links schon die Pseudo Classes <code>:link</code> und
221+
<p>Wir haben im Zusammenhang mit Links schon die Pseudo Classes <code>:any-link</code>, <code>:link</code> und
199222
<code>:visited</code> kennen gelernt, und im Zusammenhang mit Interaktion <code>:hover</code> und
200223
<code>:focus</code>.</p>
201224

202225
<p>Es gibt noch eine Hand voll weiterer Pseudo Classes:</p>
203226

204227
<ul>
205-
<li><code>:first-child</code> selektiert ein Element nur, wenn es das erste Kind seiner Eltern-Node ist</li>
206-
<li><code>:first-letter</code> selektiert nur den ersten Buchstaben! Das funktioniert auch,
207-
wenn der Buchstabe gar keine eigenen Node in der DOM ist!</li>
208-
<li><code>:first-word</code> selektiert das erste Wort. Das funktioniert auch,
209-
wenn das Wort gar keine eigenen Node in der DOM ist!</li>
210-
<li><code>::selection</code> der aktuell ausgewählte Bereich, siehe <a href="http://css-tricks.com/examples/DifferentSelectionColors/">css-tricks</a></li>
228+
<li><code>::first-child</code> selektiert ein Element nur, wenn es das erste Kind seiner Eltern-Node ist</li>
211229
<li><code>:nth-child(odd)</code> wählt jedes zweite Element aus - 1,3,5,…</li>
212230
<li><code>:nth-child(even)</code> wählt jedes zweite Element aus - 2,4,6,…</li>
213231
</ul>
214232

215233
<div class="example">
216-
<pre><code class="language-css linenums"> :first-child { color: yellow; }
234+
<pre><code class="language-css linenums"> ::first-child { color: yellow; }
217235
</code></pre></div>
218236

219237
<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>
220238

221239

222-
<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>
240+
<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>
241+
242+
<h2 id="pseudo-classes-ohne-dom-node">Pseudo Classes ohne DOM Node</h2>
243+
244+
<p>Folgende Pseudo Classes selektieren keine DOM Nodes, sondern nur Teile davon:</p>
245+
246+
<ul>
247+
<li><code>::first-letter</code> selektiert nur den ersten Buchstaben</li>
248+
<li><code>::first-letter</code> selektiert die erste Zeile</li>
249+
<li><code>::selection</code> der aktuell ausgewählte Bereich, siehe <a href="http://css-tricks.com/examples/DifferentSelectionColors/">css-tricks</a></li>
250+
</ul>
251+
252+
<div class="example">
253+
<pre><code class="language-css linenums"> n::first-line { color: yellow; }
254+
</code></pre></div>
255+
256+
<p><img src="/images/css-layout/selector-firstline.png" srcset="/images/css-layout/selector-firstline.png 1x, /images/css-layout/selector-firstline@2x.png 2x" alt="Document Object Model und Selektor" ></p>
257+
258+
259+
<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>
223260

224261
<h2 id="has-pseudo-class">Has Pseudo Class</h2>
225262

@@ -228,7 +265,7 @@ <h2 id="has-pseudo-class">Has Pseudo Class</h2>
228265
<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>
229266

230267

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>
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>
232269

233270

234271
Innerhalb von has kann man auch kompliziertere Selektoren verwenden, zum Beispiel <code>select:has(option[value=""]:checked)</code></p>
@@ -250,7 +287,7 @@ <h2 id="has-pseudo-class">Has Pseudo Class</h2>
250287
</code></pre></div>
251288

252289

253-
<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>
290+
<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>
254291

255292
<h2 id="kombinationen-von-selektoren">Kombinationen von Selektoren</h2>
256293

@@ -265,7 +302,7 @@ <h2 id="kombinationen-von-selektoren">Kombinationen von Selektoren</h2>
265302
<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>
266303

267304

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>
305+
<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>
269306

270307
<h2 id="css-selektoren-ben">CSS Selektoren Üben</h2>
271308

‎css-layout/selektoren/slide.html‎

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -229,34 +229,71 @@ <h2 id="child-selector">Child Selector</h2>
229229
</div>
230230
<div class="slide">
231231

232+
<h2 id="attribute-selector">Attribute Selector</h2>
233+
234+
<p>Mit dem Attribute Selector kann man Attribute und Werte angeben. Entweder Hier selektieren wir einen Link, dessen href-Attribut mit mailto beginnt:</p>
235+
236+
<div class="example">
237+
<pre><code class="language-css linenums"> a[href^=&quot;mailto&quot;] { color: yellow; }
238+
</code></pre></div>
239+
240+
<p><img src="/images/css-layout/attr-selector.png" srcset="/images/css-layout/attr-selector.png 1x, /images/css-layout/attr-selector@2x.png 2x" alt="Document Object Model und Selektor" ></p>
241+
242+
<p>Es gibt mehrere Varianten dieses Selektors:</p>
243+
244+
<div class="example">
245+
<pre><code class="language-css linenums"> a[href] /* Attribut existiert */
246+
a[href=&quot;https://example.com&quot;] /* Attribut hat genau diesen Wert */
247+
a[href^=&quot;mailto&quot;] /* Wert beginnt mit ... */
248+
a[href$=&quot;.svg&quot;] /* Wert endet mit ... */
249+
a[href*=&quot;www&quot;] /* Wert enthält ... */
250+
</code></pre></div>
251+
252+
</div>
253+
<div class="slide">
254+
232255
<h2 id="pseudo-classes">Pseudo Classes</h2>
233256

234-
<p>Wir haben im Zusammenhang mit Links schon die Pseudo Classes <code>:link</code> und
257+
<p>Wir haben im Zusammenhang mit Links schon die Pseudo Classes <code>:any-link</code>, <code>:link</code> und
235258
<code>:visited</code> kennen gelernt, und im Zusammenhang mit Interaktion <code>:hover</code> und
236259
<code>:focus</code>.</p>
237260

238261
<p>Es gibt noch eine Hand voll weiterer Pseudo Classes:</p>
239262

240263
<ul>
241-
<li><code>:first-child</code> selektiert ein Element nur, wenn es das erste Kind seiner Eltern-Node ist</li>
242-
<li><code>:first-letter</code> selektiert nur den ersten Buchstaben! Das funktioniert auch,
243-
wenn der Buchstabe gar keine eigenen Node in der DOM ist!</li>
244-
<li><code>:first-word</code> selektiert das erste Wort. Das funktioniert auch,
245-
wenn das Wort gar keine eigenen Node in der DOM ist!</li>
246-
<li><code>::selection</code> der aktuell ausgewählte Bereich, siehe <a href="http://css-tricks.com/examples/DifferentSelectionColors/">css-tricks</a></li>
264+
<li><code>::first-child</code> selektiert ein Element nur, wenn es das erste Kind seiner Eltern-Node ist</li>
247265
<li><code>:nth-child(odd)</code> wählt jedes zweite Element aus - 1,3,5,…</li>
248266
<li><code>:nth-child(even)</code> wählt jedes zweite Element aus - 2,4,6,…</li>
249267
</ul>
250268

251269
<div class="example">
252-
<pre><code class="language-css linenums"> :first-child { color: yellow; }
270+
<pre><code class="language-css linenums"> ::first-child { color: yellow; }
253271
</code></pre></div>
254272

255273
<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>
256274

257275
</div>
258276
<div class="slide">
259277

278+
<h2 id="pseudo-classes-ohne-dom-node">Pseudo Classes ohne DOM Node</h2>
279+
280+
<p>Folgende Pseudo Classes selektieren keine DOM Nodes, sondern nur Teile davon:</p>
281+
282+
<ul>
283+
<li><code>::first-letter</code> selektiert nur den ersten Buchstaben</li>
284+
<li><code>::first-letter</code> selektiert die erste Zeile</li>
285+
<li><code>::selection</code> der aktuell ausgewählte Bereich, siehe <a href="http://css-tricks.com/examples/DifferentSelectionColors/">css-tricks</a></li>
286+
</ul>
287+
288+
<div class="example">
289+
<pre><code class="language-css linenums"> n::first-line { color: yellow; }
290+
</code></pre></div>
291+
292+
<p><img src="/images/css-layout/selector-firstline.png" srcset="/images/css-layout/selector-firstline.png 1x, /images/css-layout/selector-firstline@2x.png 2x" alt="Document Object Model und Selektor" ></p>
293+
294+
</div>
295+
<div class="slide">
296+
260297
<h2 id="has-pseudo-class">Has Pseudo Class</h2>
261298

262299
<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>

‎images/barrierefreiheit/developertools.png‎

134 KB
Loading

‎images/barrierefreiheit/developertools@2x.png‎

229 KB
Loading

‎images/barrierefreiheit/focus.mov‎

494 KB
Binary file not shown.

‎images/barrierefreiheit/focus.mp4‎

91.3 KB
Binary file not shown.

‎images/barrierefreiheit/preview.png‎

44.1 KB
Loading

‎images/css-layout/attr-selector.png‎

152 KB
Loading

‎images/css-layout/attr-selector@2x.png‎

264 KB
Loading

‎images/css-layout/selector-firstline.png‎

91.2 KB
Loading

0 commit comments

Comments
 (0)