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

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
TABLE OF CONTENTS:
  1. · Learn CSS, Selectors, Part 3
  2. · The Descendant Selector
  3. · The Child Selector
  4. · Direct Adjacent Sibling Selector

print this article
SEARCH DEVARTICLES

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

The descendant selector gives you the ability to apply certain styling rules to an element only if a certain element is a descendant of it. For example, suppose that we have this piece of HTML code:

  <p>You can use CSS with markup languages like HTML, XHTML and XML. All those markup languages and also CSS has Specifications as the <a href="http://www.w3.org">W3C website</a> 
  <span>The <strong>W3C</strong> is the organization of web standards</span>
</p>

The <p> element is the parent of the <a> element and the <span> element, and the <span> element is the parent of <strong> element. All of these elements are considered to be descendants of the <p> element, so we can say that the <strong> element is a descendant element of the <p> element (through one nested level). The <span> element is also a descendant (it's a child too).

Suppose that we need to have the <strong> element display a yellow background color only when it exists in the context of a <p> element. This means that we will apply this rule only when the <strong> element is a descendant of the <p> element, whether the <strong> element is a child of the <p>, or a child of an element that's a child of the <p> element. This can be explained better with an example.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel="stylesheet" href="Selectors.css" type="text/css">
    <title>CSS Selectors</title>
  </head>
  <body>
    <a href="Home.html">Home</a>
    <p> You can use CSS with markup languages like HTML, XHTML and XML. All those markup languages and also CSS has Specifications as the <a href="http://www.w3.org">W3C website</a>
    <span> The <strong>W3C</strong> is the organization of web standards</span></p>
    <p><strong>Testing strong inside a paragraph</strong></p>
    <div><strong>Testing strong inside a div element</strong></div>
  </body>
</html>

And here's the CC code:

p strong
{
  background-color: yellow;
}

In the HTML code there are three <strong> elements; the first one is inside the first <p> element, inside the <span> element. The second <strong> element exists inside the second <p> element, and the third one exists inside the <div> element. As you can see, only the first two <strong> elements have been styled, because they are descendents of the <p> element. The first one exists inside a <span> element, which has the parent <p> element, and the second one exists inside the <p> element directly; both <strong> elements are considered to be descendants of the <p> element, but the third one is not because it exists inside a <div> element.

The syntax of the descendant selector is very easy. You just put the ancestor element, followed by a space, then followed by the descendant element, as in the above CSS code, p strong {}. It's more like saying we need to apply the rules whenever there's a <p> element in the document that has a descendant <strong> element. 

There's another way of saying it. We can say that we need to apply the rules whenever the <strong> element has the <p> as an ancestor. Actually, there's no obligation as to the number of elements you use in the descendant selector, so you can write something like this:

 p span strong
{
  background-color: yellow;
}

This means that we will apply the styling rules when the <p> element has a descendant <span> element which has a descendant <strong> element. If you modify the CSS descendant selector and reload the page, only the first <strong> element will be styled because it exists in the context of the <span> element, which in turn exists in the context of the <p> element. Note that in the CSS 1 called the descendant selector as the contextual selector. It has the same meaning, but descendant is better usage.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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