The CSS Child Selector

How do we specify an child selector?

  • If you need a p element to be a direct child of a div element change the space notation between div and p to > as div>p for a descendant selector.
    Example of a direct child selector:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <style type="text/css">
          p {color:red;}
          div>p { font-size:16pt; color:blue;}
          p>em {color:green}
        </style>
      </head>
      <body>
        <p>This paragraph is written in a red color</p>
        <p>Using <span>the <em>em element</em>  in the p elements</span> causes the text
          within the em element in this case printed <em>with green color</em> </p>
        <div>
          Text inside the div tag follow all preset defaults.
          <p>paragraph inside div element is blue and 16 pt.</p>
         <blockquote>
          <p>Using the <em>em element</em>  in the p elements causes the text
            within the em element in this case printed <em>with green color</em> </p>
         </blockquote>
        </div>
      </body>
    </html>
  • Note: For child selectors to work in IE a <!DOCTYPE> must be declared.

© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.