Home arrow Style Sheets arrow 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
(Page 1 of 4 )

To understand structured CSS selectors, you need to understand how markup documents like HTML documents are structured. As you know, every HTML document begins with the element <HTML>. This is called the root element because it's the beginning of the HTML structured elements. To understand the HTML structure, let's take a look at the following HTML code:

<html>
<head> 
<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>
</body>
</html>

I have indented the code so the root <HTML> element can be seen. All of the elements under the <HTML> elements are descendants from it. Any element in the document has one ultimate ancestor which is the <HTML> element, and that's why we call it the root element. It's better to discuss it in the form of a parent-child relationship: the <HTML> has two child elements in this code, the <Head> element and the <Body> element, so they are the direct children of the parent <HTML>. The <Body> element has two child elements, which are the <a> and the <p> elements. Although the <p> and <a> are child elements of <Body>, we can say that they have the same ancestor (the <Body> element). You must be familiar with this structure, because I assume that you have some experience with XHTML and XML.


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