css target child element code example

Example 1: child css

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

Example 2: how to target all child elements css

.wrapper * {
    color: blue;
    margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
    color:red;
    margin: 0 20px;
}

Example 3: 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 4: 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; }

Example 5: how to use child selectors in css

ul li { margin: 0 0 5px 0; }
ul > li { margin: 0 0 5px 0; }

Example 6: how to target a child element in css

target="_blank"