css same level

1/* Adjacent sibling combinator */
2/*
3	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.
4*/
5
6/* CSS */
7li:first-of-type + li {
8  color: red;
9}
10
11/* HTML */
12<ul>
13  <li>One</li>
14  <li>Two!</li> <!-- ONLY this one will be red -->
15  <li>Three</li>
16</ul>
17
18/* ---------------------------------------------------------------- */
19
20/* General sibling combinator */
21/*
22The 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.
23*/
24
25/* CSS */
26p ~ span {
27  color: red;
28}
29
30/* HTML */
31<span>This is not red.</span>
32<p>Here is a paragraph.</p>
33<code>Here is some code.</code>
34<span>And here is a red span!</span> <!-- this one will be red -->
35<span>And this is a red span!</span> <!-- this one will be red -->