27180 css nesting (#147)

dletorey · bsmth · web-flow · commit 6e6fd622cda1 · 2023-09-04T13:17:41.000+02:00
* added creating complex selectors with nesting

* added comment to show how the browser parses the nesting

* Update learn/selectors/nesting.html

Co-authored-by: Brian Thomas Smith &lt;brian@smith.berlin&gt;

* Update learn/selectors/nesting.html

Co-authored-by: Brian Thomas Smith &lt;brian@smith.berlin&gt;

* correctly indented the nesting.html example

* removed the empty style tags

---------

Co-authored-by: Brian Thomas Smith &lt;brian@smith.berlin&gt;
diff --git a/learn/selectors/nesting.html b/learn/selectors/nesting.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-us">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <title>Selectors: General Sibling Combinator </title>
+        <link rel="stylesheet" href="../styles.css">
+        <style class="editable">
+            h1 {
+              & ~ p { /* this is parsed by the browser as h1 ~ p */
+                font-weight: bold;
+                background-color: #333;
+                color: #fff;
+                padding: .5em;
+              }
+            }
+        </style>
+    </head>
+
+    <body>
+        <section class="preview">
+        <article>
+            <h1>A heading</h1>
+            <p>I am a paragraph.</p>
+            <div>I am a div</div>
+            <p>I am another paragraph.</p>
+        </article>
+        </section>
+
+        <textarea class="playable playable-css" style="height: 150px;">
+h1 {
+    & ~ p { /* this is parsed by the browser as h1 ~ p */
+        font-weight: bold;
+        background-color: #333;
+        color: #fff;
+        padding: .5em;
+    }
+}
+        </textarea>
+
+        <textarea class="playable playable-html" style="height: 130px;">
+<article>
+    <h1>A heading</h1>
+    <p>I am a paragraph.</p>
+    <div>I am a div</div>
+    <p>I am another paragraph.</p>
+</article>
+        </textarea>
+
+        <div class="playable-buttons">
+            <input id="reset" type="button" value="Reset">
+        </div>
+    </body>
+    <script src="../playable.js"></script>
+
+</html>
