DEV Community

Jonathan Cohen
Jonathan Cohen

Posted on

The Child Selector

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{

}
Enter fullscreen mode Exit fullscreen mode

The above example will effect the p tags that are children of the div.

<div>
   <div></div>
   <p></p>
</div>

Enter fullscreen mode Exit fullscreen mode

The p tag would be affected in this example. However:

<div>
   <div>
     <p></p>
   </div>
</div>

Enter fullscreen mode Exit fullscreen mode

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)