Last week we talked about one of the 4 CSS combinators known as the descendant selector. Every element that matches the second selector will be affected by the CSS rule you create.
This week we'll go over the child selector. This selector grants you a bit more specificity in your selection for what you want to apply the design changes to. The child selector, notated by the '>' symbol will only select the 'children' of the first selector that matches the second selector.
div > p{
}
The above example will effect the p tags that are children of the div.
<div>
<div></div>
<p></p>
</div>
The p tag would be affected in this example. However:
<div>
<div>
<p></p>
</div>
</div>
With this example, the tags are rearranged a bit. While the p tag is a descendant of the div tag, it is not a child. The child in this case is the second div and the p tag could be thought of as sort of a grandchild to the first div tag. Give it a try and as always....Happy Coding!
Top comments (0)