"css select sibling" Code Answer's

css select all siblings after element

By ofroog on Nov 27, 2020

/*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;
}

Add Comment

adjacent sibling selector

By deadlymuffin on Mar 11, 2020

/*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;
}

<ul>
  <li>One</li> // The sibling 
  <li>Two</li> // This adjacent sibling will be red
  <li>Three</li>
</ul>

Add Comment

css select sibling

By 2Bowls on Oct 01, 2020

/*
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;
}

Add Comment

sibling selector css

By Blue-eyed Bat on Dec 09, 2020

/*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{
}

Add Comment

css selector for sibling element

By Rohit on Apr 29, 2020

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

Source: developer.mozilla.org

Add Comment