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 -->