General Sibling css code example

Example 1: general sibling selector

/* The general sibling combinator (~) separates
two selectors and matches the second element 
only if it follows the first element 
(though not necessarily immediately), 
and both are children of the same parent element. */

/* Paragraphs that are siblings of and
   subsequent to any image will be red */

img ~ p {
  color: red;
}

<img src="myimg.png"/>
<p>This will be red!</p>

Example 2: css select sibling

/*
Adjecent Sibling Selector
-------------------------
example: Select all <p> tags that immediatly follows after <div> tag
*/
div + p {
  background-color: yellow;
}

/*
General Sibling Selector
-------------------------
example: Select all <p> tags that has a sibling with a <div> tag
*/
div ~ p {
  background-color: yellow;
}

Example 3: sibling selector css

/*General Sibling*/
/*The general sibling selector selects all elements that are siblings of a specified element.
The following example selects all <p> elements that are siblings of <div> elements: */
/*<div></div>
  <p></p>*/
div ~ p{
}

/*Adjacent Sibling*/
/*The adjacent sibling selector is used to select an element that is directly after another specific element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
The following example selects the first <p> element that are placed immediately after <div> elements*/
/*<div><p></p></div>
  */
div + p{
}