css child code example
Example 1: nth-child() css
/* Selects the second <li> element in a list */
li:nth-child(2) {
color: lime;
}
/* Selects every fourth element
among any group of siblings */
:nth-child(4n) {
color: lime;
}
Example 2: child css
p:nth-child(2)
{
background: red;
}
Example 3: select even child css
li:nth-child(even) { /* Selects only even elements */
color: green;
}
Example 4: direct child css
selector>direct_child_element_seletor{
rules;
}
Example 5: 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 6: 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; }