Hi there, got a quick question about id selectors, something that is bugging me tonite, maybe I am a bit tired sorry. It isprobably obvious but lately I am having strange memory laspses....
given this html fragment:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My Homepage</title>
    <link href="tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>My Homepage</h1>
<ol id="toc">
    <li><a href="page1.html">Page 1</a></li>
    <li class="current"><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
</ol>
<div class="content">
    <h2>Page 2</h2>
    <p>Text...</p>
</div>
</body>
</html>

and this css fragment:

ol#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

ol#toc a {
    background: url(tabs.gif) 100% 0;
    color: #008;
    float: left;
    line-height: 2em;
    outline: none;
    padding-right: 10px;
    text-decoration: none;
}

if we say ol#toc we target an ol element with an id of toc. But if we said #toc ol we would target an ol element descendant of an element (any) that has an id of toc. Correct?
thanks

Recommended Answers

All 2 Replies

if we say ol#toc we target an ol element with an id of toc. But if we said #toc ol we would target an ol element descendant of an element (any) that has an id of toc. Correct?

That is correct.

Brilliant, thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.