Home arrow Style Sheets arrow Page 3 - Learn CSS, Selectors, Part 3

Learn CSS, Selectors, Part 3

This will be the last discussion about CSS selectors in this series. In this article we will discuss the descendant, child and sibling selectors, with numerous code examples. It is the sixth article in our series covering CSS.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 20
June 20, 2005
  1. · Learn CSS, Selectors, Part 3
  2. · The Descendant Selector
  3. · The Child Selector
  4. · Direct Adjacent Sibling Selector

print this article

Learn CSS, Selectors, Part 3 - The Child Selector
(Page 3 of 4 )

The child selector is very similar to the descendant selector, but instead of applying the styling rules if the element has a certain descendant, it will apply the rules if the element has a direct child element. It can be explained better with an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <link rel="stylesheet" href="Selectors.css" type="text/css">
    <title>CSS Selectors</title>
    <p><a href="home.html">Home</a>
    <span>CSS is a wonderful styling language for the web</span></p>
    <p><span>Using CSS text and font properties to create good looking pages</span>
    <a href="CSShome.html">CSS Home</a></p>
    <p><strong><span>This text will not be styled</span></strong></p>

Here's the CSS code:

p > span
  background-color: blue;
  color: white;
  font-size: .9em;
  font-family: Tahoma, Arial;

And here's the resulting Web page:

As you can see in the HTML code, there are three <Span> elements. The first <Span> element is a direct child of the first <P> element in the document. The second is a direct child of the second <P> element, but differs from the first <Span> element in just the order -- the first <Span> element exists after the <a> element and the second exists before it. I just wanted to show you that the order is not important with the child Selector. The third <Span> elements exist inside a <Strong> element, which exists inside a <P> element, so this <Span> element is not a direct child of the <P> element. That's why the style will not be applied to it.

The syntax of this selector is very easy. Just use the greater than (>) symbol between the parent and the child. So if <P> is the parent and <Span> is the child you write the CSS child selector as p > span{}. You can remove the white spaces here, so it can look like p>span or p> span -- it doesn't matter. You can read it as the span element has a direct <p> element as the parent or you can read it the other way, the <p> element has a direct <Span> element as the child.

The interesting point about the child selector is that you can use more than one level of nesting. In other words, you can state that a certain element has a direct parent, which is in turn has a specific direct parent, and so on. For example, suppose that you need to set some styling rules to the <Strong> element, which has a direct <Span> element as the parent, which in turn has a direct <P> element as the parent, which in turn as a direct <TD> element as the parent (this tree must exist in this series of direct parent-child relationships). You can use the child selector as follows:

td > p > span > strong
  background-color: YellowGreen;
  color: white;
  font-size: .7em;
  font-family: Tahoma, Arial;

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials