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.