Skip to content

Commit

Permalink
Clarified the text of the adjacent-sibling combinator section of css/…
Browse files Browse the repository at this point in the history
…building_blocks/selectors/combinators/index.html (#2546)
  • Loading branch information
meyerweb committed Feb 21, 2021
1 parent 2fd538c commit 4af179d
Showing 1 changed file with 2 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down

0 comments on commit 4af179d

Please sign in to comment.