adjacent sibling selector code example

Example 1: adjacent sibling selector

/*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.*/

li:first-of-type + li {
  color: red;
}

  • One
  • // The sibling
  • Two
  • // This adjacent sibling will be red
  • Three

Example 2: css selector for sibling element

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

Tags: