A Quick Introduction to CSS Selectors

Quick Links

Ancestor
Descendant
Parent
Selectors
Credits

CSS Selectors are one of the most important aspects of the PDI framework as they are used to "select" elements on an HTML page so that they can be manipulated or styled.

Understanding the HTML DOM (Document Object Model)

A DOM, or Document Object Model, is a tree representation of the structure of a Web document that may be used via scripts to access and manipulate any element within that page.


<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <p>I can write any thing here</p>
    </body>
</html>

The above code can be viewed as:


    html
     |- head
     |   |- title
     |
     |- body
     |   |- p

All HTML documents are trees. Each level of the tree is described in the same manner as a human family tree, with ancestors, descendants, parents, children and siblings. CSS rules are based on the document tree. If you understand the document tree concept, then CSS selectors will be easy to understand and apply.

Let's start with a sample of HTML. This sample doesn't include the head or title, as we are focussing on what is inside the body:


<body>
<div id="content">
<h1>Heading here</h1>
<p>Lorem ipsum dolor sit amet.</p>

<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<hr>
</div>
<div id="nav">

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
</div>
</body>

DOM tree

Ancestor

An ancestor refers to any element that is connected but further up the document tree - no matter how many levels higher. In the diagram below, the <body> element is the ancestor of all other elements on the page.

Example: $body = P('body');

Document tree diagram showing ancestor

Descendant

A descendant refers to any element that is connected but lower down the document tree - no matter how many levels lower. In the diagram below, all elements that are connected below the <div> element are descendants of that <div>.

Example: $ul = P('div ul');

Document tree diagram showing descendant