css selector element same level code example

Example: css same level

/* Adjacent sibling combinator */
/*
	The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
*/

/* CSS */
li:first-of-type + li {
  color: red;
}

/* HTML */
<ul>
  <li>One</li>
  <li>Two!</li> <!-- ONLY this one will be red -->
  <li>Three</li>
</ul>

/* ---------------------------------------------------------------- */

/* General sibling combinator */
/*
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 element.
*/

/* CSS */
p ~ span {
  color: red;
}

/* HTML */
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span> <!-- this one will be red -->
<span>And this is a red span!</span> <!-- this one will be red -->