css select sibling

1/*To match to any sibling element after the selector on the left,
2  use the tilde symbol '~'. This is called the general sibling combinator. */
3
4h1 ~ p {
5  color: black;
6}
7

1/*The adjacent sibling combinator (+) separates two 
2selectors and matches the second element only if 
3it immediately follows the first element, and
4both are children of the same parent element.*/
5
6li:first-of-type + li {
7  color: red;
8}
9
10<ul>
11  <li>One</li> // The sibling 
12  <li>Two</li> // This adjacent sibling will be red
13  <li>Three</li>
14</ul>

1/*
2Adjecent Sibling Selector
3-------------------------
4example: Select all <p> tags that immediatly follows after <div> tag
5*/
6div + p {
7  background-color: yellow;
8}
9
10/*
11General Sibling Selector
12-------------------------
13example: Select all <p> tags that has a sibling with a <div> tag
14*/
15div ~ p {
16  background-color: yellow;
17}

1/*General Sibling*/
2/*The general sibling selector selects all elements that are siblings of a specified element.
3The following example selects all <p> elements that are siblings of <div> elements: */
4/*<div></div>
5  <p></p>*/
6div ~ p{
7}
8
9/*Adjacent Sibling*/
10/*The adjacent sibling selector is used to select an element that is directly after another specific element.
11Sibling elements must have the same parent element, and "adjacent" means "immediately following".
12The following example selects the first <p> element that are placed immediately after <div> elements*/
13/*<div><p></p></div>
14  */
15div + p{
16}
17

1/* Paragraphs that come immediately after any image */
2img + p {
3  font-weight: bold;
4}