Explain what a descendant selector is and give an example of its use.

Question

What will be an ideal response?

Answer 1

A descendant selector is a selector nested within another selector. For example, suppose that you want text that is contained in the nested elements from the previous paragraph to appear as maroon. To achieve this effect, you could create a rule for either the strong selector or the em selector. However, there may be a case when you want to apply a style to only the em element that is nested inside a strong element. In that case, you would create the following style:

      strong em {
                color: maroon;
      }

There is only a space separating the selectors. The comma is used between selectors when the style applies to all selectors in the group. The space is used, without a comma, to indicate descendant selectors. This descendant selector specifies that whenever the code for an em element is nested within a strong element, the text appears in maroon. In all other instances where the em element is used by itself, the em text would continue to appear only in italics, as it normally would, unless you created a different style for the em element. Similarly, strong text by itself would continue to appear only as bold text, but not in maroon.