CSS, How to use Descendant Selectors

Wednesday, 5. August 2009

Sample HTML

<body>
<div id=”content”>
<h1> Heading Here </h1>
<p> Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor <a href=”#”>sit</a> amet.</p>
<div>

<div id=”nav”>
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
</ul>
</div>

<div id=”footer”>
Lorem ipsum dolor <a href=”#”>sit</a> amet.
</div>
</body>

Descendant Selectors

Descendant selectors are used to selected elements that are descendants of another element

For example, in the HTML sample shown above, three <a> elements are descendants of the <li> elements. To target these three <a> elements only, and not all other <a> elements, a descendant selector can be used. This selector targets any <a> element that is nested inside an <li> element.

li a {
color:green;
}

Descendant selectors do not have to use direct descendant elements. For example, the <a> element is a descendant of <div id=”nav”> as well as the <li> element. This means that #nav a can be used as a selector as well.

#nav a {
color: red;
}

Descendant selectors also can include multiple levels of descendants to be more specific.

#nav ul li a {
color: green;
}

Posted in CSS Selectors by frenchsquared - No Comments