Clarified the text of the adjacent-sibling combinator section of css/building_blocks/selectors/combinators/index.html (#2546)

meyerweb · web-flow · commit 4af179d666bb · 2021-02-21T19:41:50.000Z
diff --git a/files/en-us/learn/css/building_blocks/selectors/combinators/index.html b/files/en-us/learn/css/building_blocks/selectors/combinators/index.html
@@ -48,11 +48,11 @@ <h2 id="Child_combinator">Child combinator</h2>
 
 <h2 id="Adjacent_sibling_combinator">Adjacent sibling combinator</h2>
 
-<p>The adjacent sibling selector (<code>+</code>) is used to select something if it is right next to another element at the same level of the hierarchy. For example, to select all <code>&lt;img&gt;</code> elements that come right after <code>&lt;p&gt;</code> elements:</p>
+<p>The adjacent sibling selector (<code>+</code>) is placed between two CSS selectors.  It matches only those elements matched by the second selector that are the next sibling element of the first selector. For example, to select all <code>&lt;img&gt;</code> elements that are immediately preceded by a <code>&lt;p&gt;</code> element:</p>
 
 <pre class="brush: css">p + img</pre>
 
-<p>A common use case is to do something with a paragraph that follows a heading, as in my example below. Here we are looking for a paragraph which is directly adjacent to an <code>&lt;h1&gt;</code>, and styling it.</p>
+<p>A common use case is to do something with a paragraph that follows a heading, as in the example below. In that example, we are looking for any paragraph which shares a parent element with an <code>&lt;h1&gt;</code>, and immediately follows that <code>&lt;h1&gt;</code>.</p>
 
 <p>If you insert some other element such as a <code>&lt;h2&gt;</code> in between the <code>&lt;h1&gt;</code> and the <code>&lt;p&gt;</code>, you will find that the paragraph is no longer matched by the selector and so does not get the background and foreground color applied when the element is adjacent.</p>
 
