fix(css): Clarify text and example for complex selectors with general sibling combinator (~)

files/en-us/web/css/general_sibling_combinator/index.md

@@ -7,11 +7,11 @@ browser-compat: css.selectors.general_sibling
 
 {{CSSRef("Selectors")}}
 
-The **general sibling combinator** (`~`) separates two selectors and matches _all iterations_ of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent {{Glossary("element")}}.
+The **general sibling combinator** (`~`) separates two selectors and matches _all instances_ of the second element that follow the first element (not necessarily immediately) and share the same parent element.
+
+In the following example, the general sibling combinator (`~`) helps to select and style paragraphs that are both siblings of an image and appear after any image.
 
 ```css
-/* Paragraphs that are siblings of and
-   subsequent to any image */
 img ~ p {
   color: red;
 }
@@ -21,20 +21,14 @@ img ~ p {
 
 ```css-nolint
 /* The white space around the ~ combinator is optional but recommended. */
-former_element ~ target_element { style properties }
+compound_selector1 ~ compound_selector2 { style properties }
 ```
 
 ## Examples
 
-### CSS
-
-```css
-p ~ span {
-  color: red;
-}
-```
+### Using the combinator with simple selectors
 
-### HTML
+This example shows the use of the `~` combinator when both the selectors are simple (`p` and `span`).
 
 ```html
 <article>
@@ -43,7 +37,7 @@ p ~ span {
   <code>Here is some code.</code>
   <span>
     This span is red because it appears after the paragraph, even though there
-    are other nodes in between
+    are other nodes in between.
   </span>
   <p>Whatever it may be, keep smiling.</p>
   <h1>Dream big</h1>
@@ -53,13 +47,52 @@ p ~ span {
   </span>
 </article>
 <span>
-  This span is not red because it doesn't share a parent with a paragraph
+  This span is not red because it doesn't share a parent with a paragraph.
 </span>
 ```
 
-### Result
+```css
+p ~ span {
+  color: red;
+}
+```
+
+{{EmbedLiveSample("Using the combinator with simple selectors", "auto", 300)}}
+
+### Using the combinator with compound selectors
+
+Elements represented by the two compound selectors share the same parent in the document tree. The element represented by the first compound selector precedes (not necessarily immediately) the element represented by the second one.
+
+The example below shows that the second compound selector must match the parent of the first compound selector.
+
+```html
+<h1>Dream big</h1>
+<span>And yet again this is a red span!</span>
+<div class="foo">
+  <p>Here is another paragraph.</p>
+  <span>A blue span</span>
+  <div class="foo">
+    <span>A green span</span>
+  </div>
+</div>
+```
+
+```css
+.foo p ~ span {
+  color: blue;
+}
+
+.foo p ~ .foo span {
+  color: green;
+}
+```
+
+{{EmbedLiveSample("Using the combinator with compound selectors", "auto", 200)}}
+
+In the above HTML, the two siblings of `.foo p` are `span` and `.foo span`.
 
-{{EmbedLiveSample("Examples", "auto", 300)}}
+- When the second compound selector is `span`, it selects the `span` element that is a sibling of `p` and both are descendants of `.foo`.
+- When the second compound selector is `.foo span`, it selects the `span` element that's a descendant of `.foo` if that `.foo` is a sibling of `p`; essentially, both are nested in an ancestor of `.foo`.
 
 ## Specifications
 
@@ -72,3 +105,4 @@ p ~ span {
 ## See also
 
 - [Adjacent sibling combinator](/en-US/docs/Web/CSS/Adjacent_sibling_combinator)
+-