Child Selectors

Earlier we looked at nested tags where you can apply styles to tags that are nested within other tags. Of course with that way of declaring the style the tag to which the style applies need not be nested directly within the other tag, it can be nested several levels deep and still be selected.

If you want to specify that the tag to which the style is to be applied is the be directly nested within the parent tag (ie. a child tag and not a grandchild, great grandchild etc.) then instead of separating the tags with a space we instead separate them with a greater than sign like this:

td>p {color:red;}

Now this style will apply to a paragraph nested directly within a table data field. If the paragraph is within a div tag that is within the td tag (for example) then this stylesheet will not apply.

The child selector stylesheet definition is supported by all version 5 and later browsers except for Internet Explorer where support for this was only implemented in version 7. Of course now that almost no one uses IE6 and earlier it is quite practical to use this selector in your web pages.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow