descendants selector code example

Example 1: css select descendant with class

Select an element with the ID "id" and the class "class":
#id.class {
}
example:
<div>
  <strong id="id" class="class">
      Foobar
  </strong>
  <strong class="class">
      Foobar
  </strong>
</div>
=> Will select the first <strong> element

Select all elements with the class "class",
which are decendents of a element with an ID of "id":
#id .class {
}
example:
<div id="id">
	<strong class="class">Foobar</strong>
</div>
=> Will select the <strong> element

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