css +siblings code example

Example 1: 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{
}

Example 2: css selector for sibling element

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

Tags:

Css Example