select sibling class css code example

Example 1: css select all siblings after element

/*To match to any sibling element after the selector on the left,
  use the tilde symbol '~'. This is called the general sibling combinator. */

h1 ~ p {
  color: black;
}

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

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