childs css code example

Example 1: child css

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

Example 2: css nth child

:nth-child(1) { /*advantage is you can do it for 2nd, 3rd etc. */
	/* styles go here*/  
}

Example 3: select odd child css

li:nth-child(odd) { /* Selects only odd elements */
    color: green;   
}

Example 4: css child selector

/*
	Descendant selectors are used to match to any nested element. 
	Child combinators, on the other hand, only match to the direct 
	child element and are defined by the greater than symbol. 
	The selector on the right must be the direct child of the element 
	on the left.
*/
/* child combinator */ 
  parent > child {...}

/* descendant selector */ 
  parent child {...}
  ancestor descendant {...}

Example 5: all child css

//Will select all li under ul
//<ul>
	<li>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</li>
</ul>
Affected li = 4
ul li { margin: 0 0 5px 0; }

//Will only select the childer li of the ul
//<ul>
	<li>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</li>
</ul>
Affected li = 1
ul > li { margin: 0 0 5px 0; }