css children selector code example
Example 1: child css
p:nth-child(2)
{
background: red;
}
Example 2: direct child css
selector>direct_child_element_seletor{
rules;
}
Example 3: css child selector
parent > child {...}
parent child {...}
ancestor descendant {...}
Example 4: descendent selector in css
The descendant combinator — typically represented by a single space ( )
character — combines two selectors such that elements matched by the second
selector are selected if they have an ancestor
(parent, parent's parent, parent's parent's parent, etc)
element matching the first selector.
example:
h1 ul {
border : 1px solid #f1f1f1;
}
Explanation: This above CSS code snippet will select all the 'ul' (unordered list)
tags which are preceeded by an 'h1' (header tag).
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: css all children of type
#nav a{
color: black;
}