Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Try It OutDirect Child SelectorExample 3-4. To see how the direct child selectors work, follow these steps.1. Using the markup in Example_3-3.html, make the following highlighted changes:Direct Child SelectorsDirect Child Descendant SelectorsDirect Child Descendant selectors apply stylesbased on parent/child ancestral relationships.The first direct child descendant example Ipresent applies style to the<span> element named code,which is a descendant child of<p> elements.To do this, the selector p >span.code is used.Using CSS, styles can be applied to any number of documents. Sincethis is the case, there may be <span>elements with a class name of code in several documents, buthave different styles applied depending on the context it appears,which is the exact situation the inventors of the descendantchild selector had in mind when it was conceived.The note text is given different styles. To do this anotherdescendant direct childselector is used, this time the selector isp.note > span.code2. Save the preceding markup document as Example_3-4.html.3. Using the style sheet that you made for Example 3-3, Example_3-3.css, make the followinghighlighted changes.body {font-face: sans-serif;}h1 {margin: 5px;}Chapter 3: Selectors77