child selector examples

Example 1: child css

p:nth-child(2)
 	{     
 		background: red;
 	}

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

Example 3: css apply style to direct children

/*
Use the ">" selector to apply css to direct children of a parent element.
example: https://jsfiddle.net/dbeachnau/54w6x0pj/2/
*/

.parent > .child { color:red; }