Mar 04

We often use Descendant selectors to select elements that are descendants of another element in the document tree. For example we can use the following css to give a border to all div’s inside any div of class panels.

div.panels div {
   border: 1px solid silver;

But what if we have nested div’s inside our panels div and we only want a border aroun the top level div’s, ie. the direct descendant of our panels div.

We can use Child selectors to achieve this. They work similarly to Descendant selectors and select an element that is a direct child of another element (parent). Child selectors will not select all descendants, only direct children.

Changing our css to now use a Child selector, and only give borders to direct descendants of divs with a class of panel, results in the following.

div.panels>div {
   border: 1px solid silver;

written by objects \\ tags: , ,

Leave a Reply

You must be logged in to post a comment.