new illustrations for dom + selectors, selector demo

Author: bjelline

content/css-layout/selektoren.md

@@ -72,7 +72,7 @@ Es gibt noch eine Hand voll weiterer Pseudo Classes:
 
 
 <css>
-  li:first-child { color: yellow; }
+  :first-child { color: yellow; }
 </css>
 
 
@@ -82,11 +82,15 @@ Es gibt noch eine Hand voll weiterer Pseudo Classes:
 Has Pseudo Class
 -------
 
-Die Pseudo Class `:has()` ist die Umkehrung des Descendant Selectors:  Mit `div:has(a)` wird der `div` Tag selektiert, falls er einen `a` Tag als Nachkommen hat.
+Die Pseudo Class `:has()` ist die Umkehrung des Descendant Selectors:  Mit `section:has(a)` wird der `section` Tag selektiert, falls er einen `a` Tag als Nachkommen hat.
 
 ![Document Object Model und has psuedo class](/images/css/selector-has.png)
 
-In `:has(...)` kann man auch kompliziertere Selektoren verwenden, zum Beispiel `select:has(option[value=""]:checked)`.  Hier wird ein Select-Tag selektiert, falls von seinen optionen diejenige ausgewählt ist, die den Leeren Wert hat. Siehe [Demo](/images/css/example-has.html).
+
+§
+Innerhalb von has kann man auch kompliziertere Selektoren verwenden, zum Beispiel `select:has(option[value=""]:checked)`
+
+Hier wird ein Select-Tag selektiert, falls von seinen optionen diejenige ausgewählt ist, die den Leeren Wert hat. Siehe [Demo](/images/css/example-has.html)
 
 
 <htmlcode>
@@ -104,43 +108,29 @@ select:has(option[value=""]:checked) {
 </htmlcode>
 
 
-Adjacent selector
----------
-
-Dieser Selector wählt das direkte Geschwister-Node aus.
-
-<css>
-  p + h1 { color: yellow; }
-  li + li { color: yellow; }
-</css>
-
-
-![Document Object Model und Selektor](/images/css-layout/selector-adj.png)
-
-
 
 Kombinationen von Selektoren
 ---------
 
 Wenn man mehrere Selektoren kombiniert hat das Komma die geringste Präzedenz:
 
 <css>
-  p, div a { color: yellow; }
+  p, section a { color: yellow; }
 </css>
 
+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)
 
 ![Document Object Model und Selektor](/images/css-layout/selector-precedence.png)
 
 
-Neu 2024: `has()`
---------------
 
 
 
 CSS Selektoren Üben
 -------
 
 
+* [Selektor Demo](/images/css/selectors/vis.html) - mit dieser Seite wurden die Illustrationen erstellt
 * [css diner - css üben mit japanischem essen](http://flukeout.github.io/)
 * [try selectors - von w3schools](https://www.w3schools.com/cssref/trysel.asp)
 

content/css/basic-selectors.md

@@ -32,7 +32,7 @@ Type Selector
 zum Beispiel wählt `li`  alle Listen-Elemente aus:
 
 <css>
-  li { color: red; }
+  li { color: yellow; }
 </css>
 
 
@@ -48,7 +48,7 @@ oder `h2`, oder `a`:
 
 
 <css>
-  h1,h2,a { color: red; }
+  h1,h2,a { color: yellow; }
 </css>
 
 
@@ -66,12 +66,12 @@ geschrieben.
 
 
 Im Beispiel unten werden alle `a` Tags ausgewählt, die Nachkomme
-eines `div` sind:
+eines `section` sind:
 
-Achtung: `div` wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt!
+Achtung: `section` wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt!
 
 <css>
-  div a { color: red; }
+  section a { color: yellow; }
 </css>
 
 
@@ -81,43 +81,43 @@ Achtung: `div` wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt
 Verschachteltes CSS
 -------------------
 
-(Neu in 2023)
-
 Auch hier wird ein Element ausgewählt, das Nachkomme eines anderen Elements ist.
 
-Achtung: `div` wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt!
+Achtung: `section` wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt!
 
 <css>
-  div {
+  section {
     & a {
-      color: red;
+      color: yellow;
     }
   }
 </css>
 
 ![Document Object Model und Selektor](/images/css/selector-desc.png)
 
-Praktisch: man kann die Deklarationen für `div` auch mit
+§
+
+Praktisch: man kann die Deklarationen für `section` auch mit
 rein schreiben:
 
 <css>
-  div {
+  section {
     border: 1px gray solid;
     padding: 10px;
     & a {
-      color: red;
+      color: yellow;
     }
   }
 </css>
 
 Und man kann das kaufmännische Und weglassen:
 
 <css>
-  div {
+  section {
     border: 1px gray solid;
     padding: 10px;
     a {
-      color: red;
+      color: yellow;
     }
   }
 </css>
@@ -168,4 +168,5 @@ Die Pseudo-Klassen `:hover` und `:active` gelten  bevor ein Link wirklich gelade
 Und noch viel mehr
 -----------
 
-Im Kapitel [CSS Selektoren im Detail](/css-layout/selektoren/) geht es weiter.
+* Im Kapitel [CSS Selektoren im Detail](/css-layout/selektoren/) geht es weiter.
+* [Selektor Demo](/images/css/selectors/vis.html) - mit dieser Seite wurden die Illustrationen erstellt