hermano 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 selector for sibling element

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